CSS绘制形状（三角形、四分之一圆、半圆、圆、梯形、球体、菱形）

三角形

        div {width: 0;height: 0;border: 200px solid transparent;border-bottom-color: black;}

直角三角形

 div {width: 0;height: 0;border-top: 50px solid transparent;border-right: 40px solid pink;border-bottom: 50px solid pink;border-left: 40px solid transparent;}

注意：CSS绘制三角形的时候一定要设置宽高为0；

圆
div {
width: 100px;
height: 100px;
border-radius: 50%;
background-color: red;
}

半圆

 div {width: 50px;height: 100px;border-radius: 50px 0 0 50px;background-color: red;}

注意：不是50%，而是50px；border-radius的顺序是左上、右上、右下、左下。
四分之一圆

 div {width: 50px;height: 50px;border-radius: 50px 0 0 0;background-color: red;}

梯形

div {width: 50px;height: 100px;border: 50px solid transparent;border-bottom-color: red;}

球体

  div {width: 100px;height: 100px;border-radius: 50%;background: radial-gradient(circle at 70px 70px,#ccc, blue);}

radial-gradient(circle at 70px 70px,#ccc, blue);径向渐变：径向渐变是从“一个点”向四周的颜色渐变。
这句代码翻译过来就是说：圆的中心在70px,70px处，颜色由#ccc逐渐扩散为blue；
linear-gradient（to right top,red 25%,blue）;线性渐变：线性渐变是从“一个方向”向“另一个方向”的颜色渐变。
这句代码翻译过来就是说：从左下角到右上角，红色在25px处逐渐变为蓝色。
linear-gradient(to right ,red,blue);==linear-gradient(to right,red 0,blue100%);

  div {width: 100px;height: 100px;background: linear-gradient(to right, red 50%, blue 50%);}

椭圆

div {width: 100px;height: 50px;border-radius: 50%;background-color: red;}

菱形

div {margin: 70px auto;width: 100px;height: 100px;background-color: transparent;transform: rotateZ(45deg)skew(30deg, 30deg);border: 10px solid pink;}

transform: rotateZ(45deg)skew(30deg, 30deg);
翻译：图形绕Z轴旋转45度，水平方向上倾斜30度，垂直方向上倾斜30度。skew值越大，菱形越“瘦”。

CSS绘制形状（三角形、四分之一圆、半圆、圆、梯形、球体、菱形）相关推荐

[css] 用CSS绘制一个三角形
[css] 用CSS绘制一个三角形 .triangle{width: 0;border-bottom: 35px solid lightgreen;border-left: 35px solid tr ...
[css] CSS画一个三角形，CSS绘制空心三角形
1.不同理解的边框 <div class="border"></div> .border {width: 50px;height: 50px;border: ...
如何用css绘制一个三角形？
一.前言通常我们在开发过程中,像一些播放器的暂停按钮.或者是一些下拉框等等,都会用到三角形. 一般我们会使用一些svg或者是icon图标来替代,那么有没有想过该怎么去绘制一个三角形呢? 废话不多说 ...
css绘制实心三角形
用css绘制三角形原理其实很简单,用到的是border-color,这个属性可以设置四条边框的颜色: border-color:red green blue pink; 上边框是红色右边框是绿色下 ...
纯CSS绘制形状（三角形、菱形、球体，长方体等等
在前段时间看到有的面试题说让说一下梯形,当时自己懵了,所以把各种各样的常见的形状的CSS实现总结一下,基本形状实现之后就可以利用这些基本形状进行组合,就可以实现复杂的形状: 1.三角形 .t ...
css 不规则边角_css绘制不规则三角形
css绘制不规则三角形 css绘制不规则三角形原理: 一个盒子包括: margin+border+padding+content上下左右边框交界处出呈现平滑的斜线. 利用这个特点, 通过设置不同的上下 ...
html div三角形,css+div打造三角形(箭头)
在很多网站都见过这样的箭头 ,之前我一直以为是图片,直到今天才知道原来可以用css做.开始看代码没太看懂,后来自己试了几遍才恍然大悟.贴出来分享下.(大神请直接忽略) 先看代码: HTML部分就是一个 ...
css 绘制三角形_解释CSS形状：如何使用纯CSS绘制圆，三角形等
css 绘制三角形 Before we start. If you want more free content but in video format. Don't miss out on my Y ...
css绘制常见的一些图形(线条、箭头、三角形、矩形、圆、椭圆、平行四边形、菱形、梯形)
css常见的图形绘制线段的绘制直线(实线) 直线(虚线) 箭头的绘制单箭头双箭头三角形的绘制直角三角形三角形矩形圆椭圆梯形的实现梯形直角梯形圆角梯形菱形的实现通过正方形 ...

CSS绘制形状（三角形、四分之一圆、半圆、圆、梯形、球体、菱形）

CSS绘制形状（三角形、四分之一圆、半圆、圆、梯形、球体、菱形）

CSS绘制形状（三角形、四分之一圆、半圆、圆、梯形、球体、菱形）相关推荐

最新文章

热门文章