css实现倒三角的最简单方法

css实现倒三角的最简单方法

1. css边框：

html

 <div class="h">div>

css:

.h{
    width: 0px;
    height: 0px;
    border: 50px solid transparent;
    border-top-color: red;
}

最终呈现结果：

如果想要其它方向的三角，很简单，直接改成border-left-color，border-right-color或者border-bottom-color即可。如果想要其它形状的倒三角，可以随意调整以下任意边框的高度：

.h{
    width: 0;
    height: 0;
    border-left: 34px solid transparent;
    border-right: 40px solid transparent;
    border-top: 80px solid red;
}

2.旋转正方形

html:

<div class="r">
    <div class="rr">div>
div>

css:

.r{
    height: 14px;
    overflow: hidden;
}
.rr{
    position: relative;
    height: 20px;
    width: 12px;
    top: -12px;
    left: 7px;
    background: #0c0c0c;
    -moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
}

最终呈现结果

其实它的主要原理是父元素将子元素不需要的部分超出隐藏，剩下倒三角形的形状。