制作非等腰三角形可以给边框设置其它样式、属性。(调节边框宽度)
<body>
<div class="box">
</div>
</body>
.box {
width: 0;
height: 0;
border-top: 120px solid transparent;
border-right: 50px solid red;
border-left: 0 solid black;
border-bottom: 0 solid blue;
}
例:(使用三角实现梯形)
<body>
<div class="price">
<span class="miaosha">
¥1650
<li></li>
</span>
<span class="reg">
¥5650
</span>
</div>
</body>
.price {
width: 160px;
height: 30px;
/* background-color: red; */
border: red 1px solid;
line-height: 30px;
}
.miaosha {
position: relative;
display: block;
margin-right: 7px;
width: 90px;
height: 30px;
float: left;
background-color: red;
text-align: center;
font-weight: 700;
color: white;
}
.miaosha li {
position: absolute;
right: 0;
top: 0;
list-style: none;
display: block;
width: 0;
height: 0;
border-style: solid;
border-width: 30px 12px 0 0;
border-color: transparent white transparent transparent;
}
.reg {
color: grey;
font-size: 14px;
text-decoration: line-through;
}