CSS画矩形、圆、半圆、弧形、半圆、小三角、疑问框
转载自:https://blog.csdn.net/lzgs_4/article/details/46827761
在网页中,经常会用到各种Icon,如果老是麻烦设计狮画出来不免有些不好意思,所以有时候我们也可以用CSS写出各种简单的形状,一来可以减轻他们的负担,二来也可以使用CSS替代图片,提高加载速度。
在网页中,结合CSS能画出来的最基本的形状就是矩形,所以,我们可以在矩形的基础上做出各种变换,得到很多不同的形状。
这次的分享主要用到圆角、边框、定位等知识点(鉴于IE9以上才支持圆角,暂时不考虑兼容问题)
先做一些通用的基础设置:
- div {
- width: 100px;
- height: 100px;
- line-height: 100px;
- text-align: center;
- margin: 100px;
- background-color: red;
- }
毫无疑问,结合HTML就可以画出最基本的矩形:
- <div>矩形</div>
效果:
下面针对矩形做一些变换:
圆形:
- <div class="circle">圆形</div>
border-radius圆角的四个值按顺序取值分别为:左上、右上、右下、左下。
原理:四个角都是圆角:四个角的取值为50%或为宽和高一样的值(此处即100px)。
- .circle {
- border-radius: 50%;
- }
半圆:
- <div class="semi-circle">半圆</div>
原理:左上、右上角是圆角,右下、左下角是直角: 左上角、右上角的值为宽和高一样的值,右下角、左下角的值不变(等于0);另外,因为还要设置高度值为原来高度的一半才是标准的半圆。
- .semi-circle {
- border-radius: 100px 100px 0 0;
- height: 50px;
- }
扇形:
- <div class="sector">扇形</div>
原理:左上角是圆角,其余三个角都是直角:左上角的值为宽和高一样的值,其他三个角的值不变(等于0)。
- .sector {
- border-radius: 100px 0 0;
- }
弧形:
- <div class="arc">弧形</div>
原理:两个对角变,另外两个对角不变:比如,左上角、右下角取值为宽和高一样的值,右上角、左下角的值不变(等于0) .添加transform属性可旋转成平躺的弧形,类似人的嘴巴形状,(*^__^*) 嘻嘻……
- .arc{
- border-radius: 100px 0;
- -webkit-transform: rotate(45deg);
- -ms-transform: rotate(45deg);
- -o-transform: rotate(45deg);
- transform: rotate(45deg);
- }
小三角:
- <div class="triangle"></div>
- <div class="arrow"></div>
原理:设置边框,并把原来div的宽和高的值设置为0,即把原来的矩形压缩成只有边框,但因为设置的边框值比较大(为了保证三角形看起来不会太小或者太细),然后设置每一个边框的颜色不同,就可以看出三角形其实就可以是由边框变换而来的。若只想显示某一块三角形,可以把其他的边框颜色设置为透明,即transparent。
- .triangle{
- border: 50px solid green;
- width: 0;
- height: 0;
- border-top-color: yellow;
- border-right-color: blue;
- border-bottom-color: pink;
- border-left-color: orange;
- }
- .arrow{
- background: none; /*为了清除前面div设置的背景颜色*/
- border: 50px solid red;
- width: 0;
- height: 0;
- border-color: red transparent transparent transparent;
- }
疑问框:
- <div class="rectangle">疑问框</div>
原理:由圆角矩形和一个小三角组成:可结合伪元素、定位实现。
- /*圆角矩形*/
- .rectangle{
- width: 200px;
- border-radius: 15px;
- position: relative;
- }
- /*小三角*/
- .rectangle::before{
- content: "";
- width: 0;
- height: 0;
- border: 15px solid red;
- border-color: red transparent transparent transparent;
- position:absolute;
- bottom: -30px;
- left: 40px;
- }
CSS画矩形、圆、半圆、弧形、半圆、小三角、疑问框相关推荐
- 纯CSS实现带小三角提示框
要实现在页面上点击指定元素时,弹出一个信息提示框.在前面的文章中,我们已经简单介绍了如何使用纯 CSS 创建一个三角形.本文在此基础上,记录如何使用 CSS 创建带三角形的提示框. 实现的原理是创建一 ...
- 初始化css样式代码、颜色、字体、浮动与清除浮动、显示、定位、盒子模型、按钮禁用、CSS画圆半圆扇形三角梯形
顔色 sass顔色变量声明 在vue中声明颜色变量时需要在 vue.config.js 里面增加如下配置. module.exports = { // ... css: { sourceMap: tr ...
- 【css】用css画圆,半圆和三角形
用css画圆,半圆和三角形 圆,半圆 三角形 圆,半圆 // 圆 宽高相等, border-radius大于宽度的一半 .circle{width: 100px;height: 100px;backg ...
- css画圆、半圆、椭圆、圆环
css画圆 在css中利用border-radius可以画出我们想要的圆 border-radius属性 可以设置盒子四边的圆弧.从上左,上右,下右,下左顺时针依次设置四个属性 也可以单独设置一个方向 ...
- 用CSS画圆、半圆、线性箭头
一.css画半圆 border-radius 可以设置盒子四边的弧度.可以设置%,px等单位. 在css中利用border-radius可以画出圆形,半圆,等图案 半圆需要两个块元素,两个块元素分别设 ...
- 长方形图片html圆形,css实现圆角矩形、半圆、圆形效果—border-radius使用详解
传统的圆角矩形实现,必须使用多张图片作为背景图案.CSS3的border-radius属性使得我们再也不必浪费时间去制作这些图片了. css实现圆角矩形.半圆.圆形效果的优点: * 减少维护的工作量, ...
- css border制作小三角形状及应用(兼容IE6)
原理 css盒模型 一个盒子包括: margin+border+padding+content – 上下左右边框交界处出呈现平滑的斜线. 利用这个特点, 通过设置不同的上下左右边框宽度或者颜色可以得到 ...
- CSS创建三角形(小三角)的几种方法
你可以在很多地方看到三角形(小三角):tooltips提示框.下拉菜单.甚至在loading载入动画里.不管你喜欢还是不喜欢,这些小元素对各UI元素之间的联系关系式很重要的. 有一些不同的方法来设计并 ...
- css做三角形横线加小三角,CSS创建三角形(小三角)的几种方法
你可以在很多地方看到三角形(小三角):tooltips提示框.下拉菜单.甚至在loading载入动画里.不管你喜欢还是不喜欢,这些小元素对各UI元素之间的联系关系式很重要的. 有一些不同的方法来设计并 ...
最新文章
- mysql版本不一致会导致uuid_MySQL性能优化和高可用架构建议
- 世界上有哪些代码量很少,但很牛逼很经典的算法或项目案例?
- python终结一个循环额_Python语言入门之内存管理方式和垃圾回收算法解析
- 【响应式Web前端设计】一文学会使用Bootstrap!
- 网站优化需要借助哪些辅助工具?
- python详细安装教程环境配置-python3.6环境安装+pip环境配置教程图文详解
- 构造函数初始化结构体
- 替换ExpandableListView右边箭头Group Indicator(小图标)
- 在Exchange 2010中重建Exchange安全组
- 03.结构化机器学习项目 W2.机器学习策略(2)
- 源码 状态机_LLVM学习笔记(1)--初探源码
- 抗锯齿_电竞屏+AI抗锯齿,雷神911 Pro游戏本给你更好游戏体验
- np.linalg 线性代数
- 2018.8.29牛客OI测试赛A-斐波那契题解(找规律)
- J2EE和J2se的区别
- matlab tanh导数,谁知道tanh(x)的二阶导数-tanh-数学-郝啪韭同学
- 酒店管理系统--C语言版
- java文件转换pdf模糊_java 库将 pdf 文件转换成高清图片方法
- mysql存特殊符号失败_mysql存储符号表情失败
- WIZnet 物联网设计大赛 - WizFi360大赛