对我而言,你的出现,就是一道光。
利用盒子的宽度和高度为0 实现下面的图形
.ddd{
height:0;
width: 0;
border-color:blue red green black;
border-style: solid;
border-width: 10px 10px 10px 10px;
}
直角三角形:
.ddd{
height:0;
width: 0;
border-color:transparent red transparent transparent;
border-style: solid;
border-width: 50px 20px 0 0;
}
利用三角实现促销样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>王子CSS学习</title>
<style>
.ddd{
margin: 100px auto;
height:0;
width: 0;
border-color:transparent red transparent transparent;
border-style: solid;
border-width: 100px 50px 0 0;
}
.aaa{
width: 160px;
height: 24px;
border: 1px solid red;
text-align: center;
line-height: 24px;
}
.miaosha{
position: relative;
#浮动 实现文字环绕
float: left;
background-color: red;
width: 90px;
height: 100%;
color: #ffffff;
font-size: 700;
}
.miaosha i{
right: 0;
top: 0;
#子绝父相,将三角定位到右边
position: absolute;
#宽高为0实现三角形
width: 0;
height: 0;
border-color: transparent #fff transparent transparent;
border-style: solid;
border-width: 24px 10px 0 0;
}
.origin{
color: gray;
font-size: 12px;
#删除线
text-decoration: line-through;
}
</style>
</head>
<body>
<div class="ddd"></div>
<div class="aaa">
<span class="miaosha">¥1650 <i></i>
</span>
<span class="origin">¥20000</span>
</div>
</body>
</html>