CSS一个盒子如何变成三角形？
CSS苦逼学习日记（11）
你想成功做出以下的图形吗？
上图在左右两边有一个斜着的竖线分割开了两部分内容，其实是在盒子内部多放了一个盒子实现的效果，因为这个盒子就是三角形的形状。
那么是如何制作的呢？
图一代码如下：
.box1 {
width: 0;
height: 0;
border-color: transparent red transparent transparent;
border-style: solid;
border-width: 100px 50px 0 0;
}
最重要的一点是此盒子的 width 和 height 只能初始化为0，
如果要做成三角形，则只需要给某一边的边线设置颜色，其余全部用 transparent （透明的意思）来表示。然后给边添加宽度就可达到相应的效果。
而图二的是做了一个透明的三角形 把它覆盖在了原本是矩形的盒子之上，所以显现出来是一个三角形的形状：
源代码： 可根据代码各种修改尝试来体验
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box1 {
width: 0;
height: 0;
border-color: transparent red transparent transparent;
border-style: solid;
border-width: 100px 50px 0 0;
}
.price {
width: 160px;
height: 24px;
line-height: 24px;
border:1px solid red;
margin: 200px auto;
}
.left {
position: relative;
text-align: center;
float: left;
width: 90px;
height: 100%;
background-color: red;
color: #ffffff;
font-weight: 700;
margin-right: 8px;
}
.left i {
position: absolute;
right: 0;
top: 0;
width: 0;
height: 0;
border-color: transparent #ffffff transparent transparent;
border-style: solid;
border-width: 24px 10px 0 0;
}
.right {
font-size: 12px;
color: gray;
text-decoration: line-through;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="price">
<span class="left">$1900
<i></i>
</span>
<span class="right">$1800</span>
</div>
</body>
</html>
当然，这是用来做三角形，如果要做其他的形状，border-color和 border-width都可以设置不同的属性值来达到不同的效果
