css画三角形

在写前端时候，ui设计时候会把一些框框修饰一下，像三角形这种，这种使用图片的话就很占请求资源，所以一般这种情况下，能使用css3写出来的就尽量使用css控制。

在写三角形时候我们把握住边宽特性就能控制想要的样式,如下：

<div class="item6"></div>
.item6{
     0;
    height: 0;
    border-color: #f00 #0f0 #00f #ff0;
    border-style: solid;
    border- 32px 32px 32px 32px;
}

css画三角形

在这里我们将举例几个

利用border:

.item1{
    0;
   height: 0;
   border-color: #0839b8 transparent transparent transparent;
   border-style: solid;
   border- 32px 32px 0 0;
}
.item2{
    0;
   height: 0;
   border-color: #0839b8 transparent transparent transparent;
   border-style: solid;
   border- 32px 0 0 32px;
}
.item3{
    0;
   height: 0;
   border-color: #0839b8 transparent transparent transparent;
   border-style: solid;
   border- 32px 32px 0 32px;
}
.item4{
    0;
   height: 0;
   border-color: transparent transparent #0839b8 #0839b8;
   border-style: solid;
   border- 0 32px 32px 32px;
}
.item5{
    0;
   height: 0;
   border-color: #0839b8 transparent transparent #0839b8;
   border-style: solid;
   border- 32px 32px 0 50px;
}

实现的效果如下：

css画三角形

利用背景颜色：

<div class='panel'></div>
<div class='pane2'></div>

.panel{
            height: 50px;
             200px;
            border: 1px solid #fff;
            background: #fff;
            position: relative;
            display: inline-block;
        }
        .panel::after{
            content: "";
            display: block;
            position: absolute;
            top: 0;
            right: 0;
             100px;
            height: 30px;
            overflow: hidden;
            text-align: right;
            background: linear-gradient(45deg, transparent 75% , #0839b8 30%);
        }
        .panel::before{
            content: "";
            display: block;
            position: absolute;
            top: 0;
            left: 0;
             100px;
            height: 30px;
            overflow: hidden;
            text-align: right;
            background: linear-gradient(135deg, transparent 0% , transparent 75%,  #0839b8 30%,  #0839b8 100%);
        }
        .pane2{
            height: 50px;
             220px;
            border: 1px solid #fff;
            background: #fff;
            position: relative;
            display: inline-block;
        }
        .pane2::after{
            content: "";
            display: block;
            position: absolute;
            top: 0;
            right: 0;
             100px;
            height: 30px;
            overflow: hidden;
            text-align: right;
            background: linear-gradient(135deg, #0839b8 77% , transparent 30%);
        }
        .pane2::before{
            content: "";
            display: block;
            position: absolute;
            top: 0;
            left: 0;
             100px;
            height: 30px;
            overflow: hidden;
            text-align: right;
            background: linear-gradient(45deg, transparent 30% , #0839b8 30%)
        }
    </style>

效果图：

css画三角形

相关推荐