用CSS画三角形、圆、圆角
用CSS画常见几何图形
利用css盒子边框特性画几何图形。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>body {background-color: #828282;}.div1 {width: 20px;height: 20px; border-top: 40px solid green;border-left: 40px solid yellow;border-right: 40px solid blue;border-bottom: 40px solid red;}.div2 {width: 0;height: 0;border-top: 40px solid transparent;border-left: 40px solid transparent;border-right: 40px solid transparent;border-bottom: 40px solid #ff0000;}.div3 {width: 40px;height: 40px;background-color: red;/* 圆的半径为盒子的一般 */border-radius: 50%;}.div4 {width: 40px;height: 40px;background-color: green;/* 圆角半径 */border-radius: 4px;}</style>
</head>
<body><p>三角形</p><div class="div1"></div><div class="div2"></div><hr><p>圆</p><div class="div3"></div><hr><p>圆角</p><div class="div4"></div>
</body>
</html>
用CSS画三角形、圆、圆角相关推荐
- [css] 请使用css画一个圆,方法可以多种
[css] 请使用css画一个圆,方法可以多种 <div class="circle"></div>1.border-radius.cirlce{width ...
- 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 ...
- 5、css画三角形?原理是什么?
简介 css画三角形的原理是利用盒子边框完成的,实现步骤可以分为以下四部: 设置一个盒子 设置四周不同颜色的边框 将盒子的宽高设置为0,仅保留边框 得到四个三角形,选择其中一个后,其他三角形(边框)设 ...
- css画三角形和箭头
css画三角形: 使用 CSS 绘制三角形的第一种方法就是使用 「border」 属性. 给定一个宽度和高度都为 0 的元素,其 border 的任何值都会直接相交,我们可以利用这个交点来创建三角形. ...
最新文章
- 在CentOS 6.3 64bit下yum安装MySQL后重置root密码的方法
- 字符串在Python内部是如何省内存的
- 联海网站开发-操作说明-会员系统及诵读之星
- 从零开始学习Oracle—安装及删除
- 十面阿里,菜鸟,天猫,蚂蚁金服题目总汇
- 基于高阶累积量的数字调制信号分类(Hierarchical Digital Modulation Classification Using Cumulants例1复现)
- Flink-org.apache.flink.streaming.api.watermark.Watermark
- 自己上手搭建VUE项目
- 读书笔记-opencv-极坐标变换
- U盘重装系统win7_U盘安装win7教程
- 如何管理NVivo的查询结果
- 使jira支持reopen率的统计
- RHEL服务篇_DNS服务
- 什么样的Java程序员可以去BAT公司上班?
- SQL语句之单行函数
- 调制与变频、基带信号与射频信号中的IQ调制(又称矢量调制)
- MySQL子查询(嵌套查询)
- 2020-12-4今日纪实
- Dima and Salad(dp+思维转化)
- 设计一款CPU芯片到底有多难?
热门文章
- Unity地面拼接实现无限路循环
- dnf服务器未响应怎么解决方法,科技知识:DNF地下城与勇士程序未响应怎么办——一招搞定...
- 3w字 长文干货!100 道 Linux 常见面试题
- 九宫格按键输入c++
- python主要是干什么用的,python到底是干什么的
- 【物联网】物联网安全---编辑中
- bzoj2683:简单题(树状数组套CDQ分分治)
- php超清壁纸,美得让人不能呼吸、4K超清壁纸3840×2160p超多图[小水管勿进]
- 网心科技入选2022中国边缘计算企业20强
- php 循环结构的联系题,php - 烧脑题,有一个程序循环逻辑问题,急在线等