css如何绘制特殊图形的方法示例

一、三角形

border边框设置

代码:

width: 300px;
height: 300px;
background: red;
border: 40px solid black;
border-left-color: blue;
border-bottom-color: yellow;
border-right-color: pink;
border-top-color: #008800;

花特殊图形的时候需要将宽高设置成0

效果:

代码:

width: 0;
height: 0;
background: transparent;
border: 40px solid black;
border-left-color: blue;
border-bottom-color: yellow;
border-right-color: pink;
border-top-color: #008800;

1、等腰三角形:将其他的边的border设置成透明

代码:

width:0;
height: 0;
background: transparent;
border: 40px solid black;
border-left-color: transparent;
border-bottom-color: yellow;
border-right-color: transparent;
border-top-color: transparent;

2、直角三角形

代码:先写出个完整的div,再使用border-***-width:0;来截取三角形

border-top-width/border-bottom-width:0=》就是在中间横着劈开一道,保留上边或者下边

border-left-width/border-right-width:0=》就是在中间竖着劈开一道,保留左边或者右边

.rightAngle{
    width: 0;
    height: 0;
    background: transparent;
    border: 40px solid black;
    border-left-color: blue;
    border-bottom-color: yellow;
    border-right-color: pink;
    border-top-color: #008800;
    border-top-width: 0;
    border-left-width: 0;
    border-right-color: transparent;
}

3、梯形

彩带图形:

代码:

width: 300px;
height: 0;
background: transparent;
border: 40px solid #008800;
border-left-color: transparent;
border-bottom-color: yellow;
border-right-color: transparent;
border-top-color: #008800;

梯形:

代码:将上面彩带图形的宽度减少,然后将上面的梯形设置为透明

width: 100px;
height: 0;
background: transparent;
border: 40px solid #008800;
border-left-color: transparent;
border-bottom-color: #008800;
border-right-color: transparent;
border-top-color: transparent;

总结:通过设置长度和高度,以及设置border的透明度来拼凑成想要的图形 4、圆形

4、图形:

代码: 使用border-radius:50%;

.circle{
    width: 100px;
    height: 100px;
    border: 0;
    border-radius: 50%;
    background-color: orange;
}

5、椭圆

图形:

代码:

.ellipse{
    width: 200px;
    height: 120px;
    background-color: orange;
    border-top-left-radius: 50%;
    border-top-right-radius: 50%;
    border-bottom-left-radius: 50%;
    border-bottom-right-radius: 50%;
}

总结:

一个display:block的元素设定宽高之后表现为矩形。通过设定border-radius可以得到圆角矩形,圆形和椭圆形。

在使用border-radius时,有几点可能需要注意一下:

  • border-radius,可以分别对4个角进行设定。 例如上图:border-top-left-radius: apx bpx;
  • border-xxx-xxx-radius的两个值分别代表着椭圆长轴和短轴长度的一半,通常简写的时候例如border-top-left-radius: 10px;(border-top-left-radius:10px 10px;) 表明长轴和短轴的长度均为20px,也就是半径为10px的圆形(圆角部分)。
  • 当使用百分比数值时,a 相对于width, b相对于height 6、特殊图形

(1)斜边三角形

图形:

代码:先画个等边三角形,然后再转换角度

.beveledTriangle{
    margin: 50px;
    width: 0;
    height: 0;
    border: 20px solid #2b81af;
    border-top-width: 40px;
    border-top-color:transparent;
    border-bottom-width: 40px;
    border-bottom-color: transparent;
    border-left-width: 0;
    border-right-color: #008800;
    border-right-width: 25px;
    transform-origin:center center;
    transform:rotateY(-180deg) rotate(-44deg)  ;
}

(2)绘制一条“小尾巴”

图形:

代码:

.tail{
    margin: 50px;
    width: 100px;
    height: 70px;
    border-top-right-radius: 70px 70px;
    border-right:6px solid #000000;
}

css如何绘制特殊图形的方法示例

扫一扫手机访问