用純css畫一個三角形

将div的寬高都設定為0，即可利用border來實作。

下面是向上的三角：

width: 0;
height: 0;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
border-bottom: 60px solid #e60012;
           

下面是向下的三角：

width: 0;
height: 0;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
border-top: 60px solid #e60012;
           

可以看出規律，

如果想要向左的三角，可以設定border-top,border-bottom 寬30 透明背景；border-right 寬60 紅色背景。

如果想要向右的三角，可以設定border-top,border-bottom 寬30 透明背景；border-left 寬60 紅色背景。

接下來是我的應用需求，我想要類似這樣的效果：

.price{
    line-height: 50px;
    background: #f72d3c;
    color: #ffffff;
    font-size: 26px;
    padding-right: 10px;
    display: inline-block;
    float: left;
    margin-top: 10px;
}
.shape{
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 25px 15px;
    border-color: transparent #f72d3c transparent transparent;
    display: inline-block;
    margin-left: -20px;
    float: left;
    margin-top: 10px;
}

<a class="shape"></a>
<a class="price">￥300</a>
           

還可以使用僞類實作這樣的效果：

.price{
    line-height: 50px;
    border: 4px solid #f72d3c;
    color: #f72d3c;
    font-size: 26px;
    padding-right: 10px;
    border-left: none;
    margin-left: 4px;
}
.price:before{
	content: '';
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 20px;
	border-color: transparent;
	border-right-color: #fdfafa;
	position: absolute;
	margin-left: -35px;
	margin-top: 5px;
	z-index: 2;
}
.price:after{
	content: '';
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 21px;
	border-color: transparent;
	border-right-color: #e60012;
	position: absolute;
	margin-top: 4px;
	left: 0;
}

<div>三角樣式</div>
<a class="price">￥300</a>
<div>end</div>
           

具體的調試還需要自己調整哈，隻是提供了一個思路