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 （透明的意思）来表示。然后给边添加宽度就可达到相应的效果。

而图二的是做了一个透明的三角形 把它覆盖在了原本是矩形的盒子之上，所以显现出来是一个三角形的形状：

源代码：
可根据代码各种修改尝试来体验

    
    
    
    


    
"box1">
"price">
"left">$1900


"right">$1800

---

当然，这是用来做三角形，如果要做其他的形状，border-color和 border-width都可以设置不同的属性值来达到不同的效果