该样式的制作,前半部分是一个矩形+一个直角三角形。矩形可通过span盒子,设置其宽度和高度以及颜色等样式,接下来我将介绍如何制作直角三角形。
1.设置盒子款高均为0,设置边框颜色以及宽度,样式如下代码:
.demo {
width: 0;
height: 0;
border-top-color: skyblue;
border-right-color: pink;
border-bottom-color: yellowgreen;
border-left-color: peru;
border-style: solid;
border-width: 50px 50px 50px 50px;
}
则class="demo"的盒子样式如下:
2.当我们将下边框宽度改成0时(4个参数一次是上右下左,顺时针)
border-width: 50px 50px 0 50px;
则盒子会变成:
3.再将左边的盒子边框设置为0,
border-width: 50px 50px 0 0;
则盒子变成:
4.我们只需要将剩余盒子的右边Border隐藏了就能得到粉色形状的直角三角形了。
border-color: transparent pink transparent transparent;
再通过定位(子绝父相),让粉色三角压在父盒子上面:
最终修改三角形颜色,写右边盒子,设置两个盒子margin距离。修改宽度可以让三角形不是等腰的
完整代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>京东价格</title>
<style>
* {
margin: 0;
padding: 0;
}
.price {
width: 160px;
height: 24px;
border: 1px solid red;
margin: 100px auto;
line-height: 24px;
font-size: 700;
}
.miaosha {
position: relative;
float: left;
width: 90px;
height: 100%;
background-color: red;
text-align: center;
margin-right: 8px;
}
.miaosha i {
position: absolute;
right: 0;
width: 0;
height: 0;
/* border-color: transparent blue transparent transparent; */
border-color: transparent white transparent transparent;
border-style: solid;
border-width: 24px 10px 0 0;
}
.origin {
font-size: 12px;
color: gray;
text-decoration: line-through;
}
</style>
</head>
<body>
<div class="price">
<span class="miaosha">¥1650
<!-- 做盒子里面的三角 -->
<i></i>
</span>
<span class="origin">¥1800</span>
</div>
</body>
</html>