CSS 画三角形、半圆、扇形、

1.三角形：元素宽高设置为0，通过border属性来设置，让其它三个方向的border颜色为透明或者和背景色保持一致，剩余一条border的颜色设置为需要的颜色，三角形的方向就设置反方向的border。

.down {width: 0;height: 0;border: 100px solid transparent;border-top-color: red;
}.up {width: 0;height: 0;border: 100px solid transparent;border-bottom-color: blue;
}

2.半圆：border-radius圆角的四个值按顺序取值分别为：左上、右上、右下、左下。要画半圆就要右下角、左下角的值为0就行了

.semi-circle {width: 100px;height: 100px;line-height: 100px;text-align: center;margin: 100px;background-color: yellow;border-radius: 100px 100px 0 0;height: 50px;}

3.扇形：扇形就是半圆的一半就直接给一个有值，其余三个为0就行了

  .sector  {width: 100px;height: 100px;line-height: 100px;text-align: center;margin: 100px;background-color: green;border-radius: 100px  0 0;}

CSS 画三角形、半圆、扇形、相关推荐

初始化css样式代码、颜色、字体、浮动与清除浮动、显示、定位、盒子模型、按钮禁用、CSS画圆半圆扇形三角梯形
顔色 sass顔色变量声明在vue中声明颜色变量时需要在 vue.config.js 里面增加如下配置. module.exports = { // ... css: { sourceMap: tr ...
CSS画三角形、扇形
1.三角形 <style> .sector {width: 0;height: 0;/*border-radius: 100px;*/border-width: 100px;border- ...
CSS画圆半圆扇形三角梯形
直接上代码: div{margin: 50px;width: 100px;height: 100px;background: red; } /* 半圆 */ .half-circle{height: ...
css画直角三角形,关于CSS画三角形的那些事
用CSS画一个三角形,是不难的问题,但我却掌握的不够熟练,例如当要求为画一个直角三角形或者等腰三角形,我就有点反应不过来.所以,在这篇中点透它,以后再见,不含糊. 原理分析用CSS画三角形,实际上就 ...
【前端：css画三角形】
网上也有各种各样用CSS样式来写三角形的文章,但个人觉的有些乱,本来可能就不明白如何写,可能看完之后和没看是没什么区别的.因此本人在这里写好了方法,希望可以帮助的刚入门的前端工作者 .box{widt ...
HTML之CSS画三角形原理
在进行WEB应用开发的过程中,我们经常会需要使用到三角形图标,例如下面这个下拉选择控件右侧的收缩箭头. 又或者像下面这种情形. 搜索网络之后发现三角形可以通过以下CSS代码实现: #triangle_ ...
如何使用HTML+CSS画三角形
今天又有小姐姐在群里问css是如何画出三角形的,让我想起一开始在学校学HTML+CSS的时候,觉得学这些标签样式很无趣,认为不过是一些文字+图片,直到偶然在慕课网上面看了一个视频=>重拾CSS的 ...
前端之使用CSS画三角形
在网页中如果需要一个三角形的图标,这时如果使用图片或字体图标可能会过于麻烦,这时候,利用CSS也可以轻松解决这个问题: 1.利用CSS画直角等腰三角形想要使用css画三角形,首先需要定义一个没有宽度 ...
css画三角形的两种方法
css画三角形的两种方法画三角形 1 border 2 css的clip-path 画三角形 1 border <div class="left-down-small" / ...
CSS画三角形及其原理
搜索网络之后发现三角形可以通过以下CSS代码实现: #triangle_bottom{ height:0px; width:0px; border-left:20px solid transparen ...

CSS 画三角形、半圆、扇形、

CSS 画三角形、半圆、扇形、相关推荐

最新文章

热门文章