圆，半圆

// 圆 宽高相等， border-radius大于宽度的一半
.circle{width: 100px;height: 100px;background: red;-moz-border-radius: 50px;-webkit-border-radius: 50px;border-radius: 50px;
}

拓展链接： border-style之dotted显示一个圆 https://blog.csdn.net/kanghui_898/article/details/70837694

// 左半圆 宽度是高度的一半，左上，左下border-radius是高度的一半
.circle-half-left{width: 50px;height: 100px;background: red;border-radius: 50px 0 0 50px;
}// 右半圆 宽度是高度的一半，右上，右下border-radius是高度的一半
.circle-half-right{width: 50px;height: 100px;background: red;border-radius: 0 50px 50px 0;
}// 上半圆 高度是宽度的一半，左上，右上border-radius是宽度的一半
.circle-half-top{width: 100px;height: 50px;background: red;border-radius: 50px 50px 0 0;
}// 下半圆 高度是宽度的一半，左下，右下border-radius是宽度的一半
.circle-half-bottom{width: 100px;height: 50px;background: red;border-radius: 0 0 50px 50px;
}

拓展下，是不是还挺漂亮（可根据需要自由组合，玩一玩）

// leaf1 宽高相等
.leaf1-left{width: 50px;height: 50px;background: red;border-radius: 0 50px;
}
.leaf1-right{width: 50px;height: 50px;background: red;border-radius: 50px 0;
}// leaf1 宽高不等
.leaf2-left{width: 100px;height: 50px;background: red;border-radius: 0 50px;
}
.leaf2-right{width: 100px;height: 50px;background: red;border-radius: 50px 0;
}.leaf2-top{width: 50px;height: 100px;background: red;border-radius: 0 50px;
}
.leaf2-bottom{width: 50px;height: 100px;background: red;border-radius: 50px 0;
}

三角形

// 上三角 左右边框透明，下边框不透明
.triangle-up{width: 0;height: 0;border-left: 50px solid transparent;border-right: 50px solid transparent;border-bottom: 50px solid red;
}// 下三角 左右边框透明，上边框不透明
.triangle-down{width: 0;height: 0;border-left: 50px solid transparent;border-right: 50px solid transparent;border-top: 50px solid red;
}// 左三角 上下边框透明，右边框不透明
.triangle-left{width: 0;height: 0;border-top: 50px solid transparent;border-bottom: 50px solid transparent;border-right: 50px solid red;
}// 右三角 上下边框透明，左边框不透明
.triangle-right{width: 0;height: 0;border-top: 50px solid transparent;border-bottom: 50px solid transparent;border-left: 50px solid red;
}

原文链接：纯CSS画的基本图形（矩形、圆形、三角形、多边形、爱心、八卦等）https://www.cnblogs.com/ming1025/p/7363074.html

【css】用css画圆，半圆和三角形相关推荐

初始化css样式代码、颜色、字体、浮动与清除浮动、显示、定位、盒子模型、按钮禁用、CSS画圆半圆扇形三角梯形
顔色 sass顔色变量声明在vue中声明颜色变量时需要在 vue.config.js 里面增加如下配置. module.exports = { // ... css: { sourceMap: tr ...
以下css属性可以用来画圆的是,css3 如何画圆
css3画圆的实现方法:首先创建一个HTML示例文件:然后定义一个div,并命名为"circle":最后通过css属性"border-radius"使div实现 ...
CSS画圆半圆扇形三角梯形
直接上代码: div{margin: 50px;width: 100px;height: 100px;background: red; } /* 半圆 */ .half-circle{height: ...
css指定位置画圆,【翻译】4种CSS画圆的方法
四种方法 1. Border Radius .circle { background: #456BD9; border: 0.1875em solid #0F1C3F; border-radius: ...
css画圆, 如何用纯css实现一个动态画圆环效果
最终的效果是:用纯css实现动态画圆的动画效果 html结构如下: <div class="wrap"> <div class="circle" ...
Html中圆圈怎么画,css怎么画圆？
css怎么画圆?其实很简单.我们需要使用一个关键属性:border-radius属性来画圆.下面本篇文章就来给大家介绍一下使用CSS border-radius属性画圆的方法,希望对大家有所帮助. 首 ...
css画圆、半圆、椭圆、圆环
css画圆在css中利用border-radius可以画出我们想要的圆 border-radius属性可以设置盒子四边的圆弧.从上左,上右,下右,下左顺时针依次设置四个属性也可以单独设置一个方向 ...
CSS画圆、三角形、品字、骰子
CSS画圆.三角形.品字.骰子前言:这篇文章主要是本人正在看面试题,面试题当成八股文来背,太难了.所以,通过写笔记,并自己实践来加深印象.如果这篇文章对你有帮助,请不要吝啬你的赞. 圆让 bord ...
用CSS画圆、半圆、线性箭头
一.css画半圆 border-radius 可以设置盒子四边的弧度.可以设置%,px等单位. 在css中利用border-radius可以画出圆形,半圆,等图案半圆需要两个块元素,两个块元素分别设 ...

【css】用css画圆，半圆和三角形

用css画圆，半圆和三角形

圆，半圆

三角形

【css】用css画圆，半圆和三角形相关推荐

最新文章

热门文章