CSS 实现三角形梯形等腰梯形

Posted 乔安娜~春凤

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了CSS 实现三角形梯形等腰梯形相关的知识,希望对你有一定的参考价值。

三角形

 .graph:before{ content: ""; display: block; height: 0; width: 0px; border-width: 0px 30px 45px 145px; border-style: none solid solid; border-color: transparent transparent red; }

等腰三角形(只用修改border-width属性值就可以了)

.graph:before{ content:""; display:block; width:0; height:0; border-width:0px 300px 100px; border-style:none solid solid; border-color:transparent transparent red; }

直角三角形

.graph:before{ content:""; display:block; width:0; height:0; border-width:0px 0px 200px 200px; border-style:none solid solid; border-color:transparent transparent red; }

梯形

.graph2:before{border-color:transparent transparent red;border-style:none solid solid;border-width:0 20px 60px 145px;content:"";display:block;height:0;left:-10px;width:200px;}

 

等腰梯形

.graph2:before{border-color:transparent transparent red;border-style:none solid solid;border-width:0 45px 45px;content:"";display:block;height:0;left:-10px;width:200px;}

 等腰梯形旋转

.promotion-contain2 {
    content:"";
    display:block;
    height:0;
    border-width:0px 15px 15px;
    border-style:none solid solid;
    border-color:transparent transparent red;
    position:absolute;
    -moz-transform:rotate(-45deg);/*FF浏览器*/
    -webkit-transform:rotate(-45deg);/*chrome浏览器*/
    -o-transform:rotate(-45deg);/*oprea浏览器*/
    -ms-transform:rotate(-45deg);/*IE浏览器*/
    left:-10px;
    top:17px;
    width:40px;
}

以上是关于CSS 实现三角形梯形等腰梯形的主要内容,如果未能解决你的问题,请参考以下文章

js中使用while循环将等腰三角形,倒等腰三角形,菱形,平行四边形,梯形输出

各种demo:css实现三角形,css大小梯形,svg使用

css画三角形和梯形

Unity3D之Mesh绘制扇形扇面环形

shell编程之各种小图形

shell小练(图形千变万化)