如何利用CSS画三角形、圆形、柠檬、小药丸?

一、用边框线画出三角形

方法:

1.盒子边框全设为0

2.把不要的边框线颜色设为透明

.box {

border-left: 30px solid transparent;

border-right: 30px solid plum;

border-top: 30px solid plum;

border-bottom: 30px solid transparent;

width: 0;

height: 0;

}

二、用圆角边框画柠檬

方法：

1.先给一个正方形的盒子

2.对角圆角大小保持一致，一个大一个小即可（大小自行控制）

.lemon {

height: 200px;

width: 200px;

background-color: yellowgreen;

border-radius: 110px 20px;

}

三、圆角边框画太阳（完整的圆）

方法：

1.给一个正方形的盒子

2. border-radius: 50%;

.sun {

height: 200px;

width: 200px;

background-color: red;

border-radius: 50%;

}

四、圆角边框画小药丸

方法：

1.给一个长方形的盒子

2. 圆角大小给小一点，自行微调

.pill {

height: 100px;

width: 200px;

background-color: rgb(40, 133, 245);

border-radius: 50px;

}

如何利用CSS画三角形、圆形、柠檬、小药丸?相关推荐

利用css 画三角形
1.先画一个正方形 2.在定义4条边框,你想那个三角形朝哪个方向就给那条边框定义颜色,其余边框颜色设置透明. transparent :透明 <!DOCTYPE html> <htm ...
前端学习之路—用css画一个圆形，三角形，椭圆
用css画一个圆形,三角形,椭圆一.圆形 css代码如下: <!DOCTYPE html> <html lang="en"> <head>&l ...
5、css画三角形？原理是什么？
简介 css画三角形的原理是利用盒子边框完成的,实现步骤可以分为以下四部: 设置一个盒子设置四周不同颜色的边框将盒子的宽高设置为0,仅保留边框得到四个三角形,选择其中一个后,其他三角形(边框)设 ...
css画直角三角形,关于CSS画三角形的那些事
用CSS画一个三角形,是不难的问题,但我却掌握的不够熟练,例如当要求为画一个直角三角形或者等腰三角形,我就有点反应不过来.所以,在这篇中点透它,以后再见,不含糊. 原理分析用CSS画三角形,实际上就 ...
【前端：css画三角形】
网上也有各种各样用CSS样式来写三角形的文章,但个人觉的有些乱,本来可能就不明白如何写,可能看完之后和没看是没什么区别的.因此本人在这里写好了方法,希望可以帮助的刚入门的前端工作者 .box{widt ...
HTML之CSS画三角形原理
在进行WEB应用开发的过程中,我们经常会需要使用到三角形图标,例如下面这个下拉选择控件右侧的收缩箭头. 又或者像下面这种情形. 搜索网络之后发现三角形可以通过以下CSS代码实现: #triangle_ ...
如何使用HTML+CSS画三角形
今天又有小姐姐在群里问css是如何画出三角形的,让我想起一开始在学校学HTML+CSS的时候,觉得学这些标签样式很无趣,认为不过是一些文字+图片,直到偶然在慕课网上面看了一个视频=>重拾CSS的 ...
css画三角形(怎么用css画三角形)
如何用css3画一个有边框的三角形如果是一个正方形,我们写边时,会用到border,但我们这里讨论的三角形本身就是border,不可能再给border添加border属性,所以我们需要用到其他办法. ...
前端之使用CSS画三角形
在网页中如果需要一个三角形的图标,这时如果使用图片或字体图标可能会过于麻烦,这时候,利用CSS也可以轻松解决这个问题: 1.利用CSS画直角等腰三角形想要使用css画三角形,首先需要定义一个没有宽度 ...

如何利用CSS画三角形、圆形、柠檬、小药丸?

如何利用CSS画三角形、圆形、柠檬、小药丸?相关推荐

最新文章

热门文章