如何实现带文字的三角形

如何实现带文字的三角形

新项目中有这么一个可爱的小标记，如下：

前段时间刚刚学习了如何用border来实现三角形，

参考地址：https://css-tricks.com/examples/ShapesOfCSS/

想了想，该方法在这里并不适用，于是开始了新的研究。

在网上爬到一篇讲带图片的三角形，收益匪浅。

参考地址：http://www.w2bc.com/Article/8500

一段一段代码的阅读后，找到了这个问题的解决办法。

大概的思路是这样的：

定义一个正方形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的旋转点，定位就会方便一些。可以尝试一下。