Home  >  Article  >  Web Front-end  >  Use css to draw various trapezoids with different styles

Use css to draw various trapezoids with different styles

王林
王林forward
2021-01-05 10:14:104683browse

Use css to draw various trapezoids with different styles

First we need to know four very important styles:

(Learning video sharing: css video tutorial)

border-buttom:Set the bottom border

border-top:

border-left:

border-right:

<div class="mask"></div>
.mask
{
    height: 0;
    width: 100px;
    border-top: 100px solid red;
    border-right: 37px solid transparent;
}

Use css to draw various trapezoids with different styles

.mask
        {
            width:100px;
            height:0;
            border-width:0 37px 100px 37px;
            border-style:none solid solid;
            border-color:transparent transparent red;
        }

Use css to draw various trapezoids with different styles

.mask
        {
            width:100px;
            height:0;
            border-top: 100px solid red;
            border-right: 37px solid transparent;
            border-left:37px solid transparent;
        }

Use css to draw various trapezoids with different styles

 .mask
        {
            width:100px;
            height:0;
            border-top:100px solid red;
            border-left:37px solid transparent;
        }

Use css to draw various trapezoids with different styles

There are also some strange graphics that I can develop myself.

.mask
        {
            width:100px;
            height:0;
            border-bottom:100px solid red;
            border-left:37px solid transparent;
            margin-left: -30px;
        }

Use css to draw various trapezoids with different styles

Related recommendations: CSS tutorial

The above is the detailed content of Use css to draw various trapezoids with different styles. For more information, please follow other related articles on the PHP Chinese website!

Statement:
This article is reproduced at:csdn.net. If there is any infringement, please contact admin@php.cn delete