“切”后旋转的div?
问题描述:
我创建了一个信息工具提示,如: “切”后旋转的div?
但它包含的图像:
和常规股利的权利。 (里面有文字)
但是,我不喜欢用图像去做。我想用旋转div创建三角形部分。
我已经成功通过创建一个简单的div做here并旋转:
transform: rotate(45deg);
-ms-transform: rotate(45deg); /* IE 9 */
-webkit-transform: rotate(45deg); /* Safari and Chrome */
,其结果是:
但是(这是我的问题) - 我可以删除旋转的div的右侧部分,因此我将只有:
可能吗?
p.s. - 我知道thtat我可以通过使用另一个相对/绝对位置的div来隐藏div的右边部分。但我想知道是否有删除正确部分的解决方案。 (或者,是否有任何代码可以创建三角形?)。还假设角度是90度。像红色的div。
答
你可以做到这一点没有元素旋转,这种包装的位置相对元素中,并用绝对位置来设置它的权利
.left {
width: 0;
height: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-right:10px solid #001744;
}
哇...我怎么能放大? – 2013-05-06 07:57:02
@RoyiNamir增加边界大小http://jsfiddle.net/R3kkN/1/ – 2013-05-06 07:57:16
令人惊叹。 (仍然消化它)。但边界顶部怎么不是一个纯粹的边界矩形?边界如何创建三角形? – 2013-05-06 08:01:07