如何实现带文字的三角形
新项目中有这么一个可爱的小标记,如下:
前段时间刚刚学习了如何用border来实现三角形,
参考地址:https://css-tricks.com/examples/ShapesOfCSS/
想了想,该方法在这里并不适用,于是开始了新的研究。
在网上爬到一篇讲带图片的三角形,收益匪浅。
一段一段代码的阅读后,找到了这个问题的解决办法。
大概的思路是这样的:
定义一个正方形div(外层红色的),一个长方形p(内存绿色的),p的宽度为DIV的对角线长,高度为宽度的一半。
然后将p移动到合适的位置
再把文字放到合适的位置上去,就搞定啦。
具体实现代码如下:
html:
<div class = "yellow"> <p class = "text"></p> </div>
css:
.yellow{
position: relative;
width: 40px;
height: 40px;
margin: 0;b
order-top: 1px solid yellow;
border-left: 1px solid yellow;
overflow: hidden;
display: block;
transform: skew(0deg, 0deg) translate3d(0, 0, 0);
}
.text{
background: yellow;
position: absolute;
width: 56px;
height: 28px;
left: -46%;
top: -12%;
margin: 0;
border-bottom: 1px solid yellow;
color: #000;
font-size: 14px;
font-weight: bold;
text-align: center;
line-height: 42px;// 3/4*56
transform: skew(-0deg, -0deg) rotate(-45deg);
}
今天和同事说起这个做法,发现有一部分还需要改进一下,可以设定带文字的div的旋转点,定位就会方便一些。可以尝试一下。