CSS画矩形、圆、半圆、弧形、半圆、小三角、疑问框
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title>CSS画矩形、圆、半圆、弧形、半圆、小三角、疑问框</title>
<style type="text/css">
div {
width: 200px;
height: 200px;
line-height: 200px;
text-align: center;
margin: 200px auto;
background-color: red;
}
/*圆形
原理:四个角都是圆角:四个角的取值为50%或为宽和高一样的值(此处即100px) */ .circle {
border-radius: 50%;
/*border-radius圆角的四个值按顺序取值分别为:左上、右上、右下、左下。*/
}
/*半圆
原理:左上、右上角是圆角,右下、左下角是直角: 左上角、右上角的值为宽和高一样的值。右下角、左下角的值不变(等于0)。另外。由于还要设置高度值为原来高度的一半才是标准的半圆。*/ .semi-circle {
border-radius: 200px 200px 0 0;
height: 100px;
}
/*扇形
原理:左上角是圆角。其余三个角都是直角:左上角的值为宽和高一样的值,其它三个角的值不变(等于0)。*/ .sector {
border-radius: 200px 0 0;
}
/*弧形
原理:两个对角变,另外两个对角不变:比方,左上角、右下角取值为宽和高一样的值。右上角、左下角的值不变(等于0) .加入transform属性可旋转成平躺的弧形,类似人的嘴巴形状,(*^__^*) 嘻嘻……*/ .arc {
border-radius: 200px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
/*三角形
原理:设置边框,并把原来div的宽和高的值设置为0,即把原来的矩形压缩成仅仅有边框,但由于设置的边框值比較大(为了保证三角形看起来不会太小或者太细),然后设置每个边框的颜色不同。就能够看出三角形事实上就能够是由边框变换而来的。若仅仅想显示某一块三角形,能够把其它的边框颜色设置为透明,即transparent。*/ .triangle {
border: 100px 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: 100px solid red;
width: 0;
height: 0;
border-color: red transparent transparent transparent;
}
/*疑问框
原理:由圆角矩形和一个小三角组成:可结合伪元素、定位实现。*/
/*圆角矩形*/ .rectangle {
width: 200px;
height: 100px;
line-height: 100px;
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;
}
</style>
</head> <body>
<div>矩形</div>
<div class="circle">圆形</div>
<div class="semi-circle">半圆</div>
<div class="sector">扇形</div>
<div class="arc">弧形</div>
<div class="triangle"></div>
<div class="arrow"></div>
<div class="rectangle">疑问框</div>
</body> </html>
CSS画矩形、圆、半圆、弧形、半圆、小三角、疑问框的更多相关文章
- CSS通过边框border-style来写小三角
<!DOCTYPE html> /*直接复制代码即可在浏览器验证*/ <html> <head lang="en"> <meta char ...
- 【CSS】CSS画矩形、圆、半圆、弧形、半圆、小三角、疑问框
在网页中,常常会用到各种Icon,假设老是麻烦设计狮画出来不免有些不好意思,所以有时候我们也能够用CSS写出各种简单的形状.一来能够减轻他们的负担,二来也能够使用CSS替代图片.提高载入速度. 在网页 ...
- css实现小三角(原理)
效果图如图1所示:(简单示范,有点丑,莫介意) PS:兼容IE,FF , chrome ,360安全浏览器 先讲下原理吧,如图2所示: 这个div的样式如下所示: div{ width: 0px; h ...
- CSS创建三角形(小三角)的几种方法
你可以在很多地方看到三角形(小三角):tooltips提示框.下拉菜单.甚至在loading载入动画里.不管你喜欢还是不喜欢,这些小元素对各UI元素之间的联系关系式很重要的. 有一些不同的方法来设计并 ...
- css制作小三角
视觉稿中经常有些小三角,如下图.每次用图片做太不方便了,我们看看用css实现的效果(支持ie6,7哦) <style> /*border实现三角*/ /*箭头向上*/ .arrow-top ...
- css直接写出小三角
在开发移动端项目时,总是遇到很多小三角,之前一直用图片,感觉好麻烦,今天尝试了直接用CSS写出小三角!先看看如何写出各种小三角! /*箭头向上*/ .arrow-up { ; ; border-lef ...
- CSS的小三角
上三角▲ width: 0; height: 0; line-height: 0; font-size: 0; border-width: 10px; border-style: solid; bor ...
- css border制作小三角形状及气泡框(兼容IE6)
先看下CSS盒模型 一个盒子包括: margin+border+padding+content 上下左右边框交界处出呈现平滑的斜线. 利用这个特点, 通过设置不同的上下左右边框宽度或者颜色可以得到小三 ...
- 一个常见下拉菜单的样式:一体化小三角(纯css手写解决)
类似下拉菜单2个一体化小三角,习惯上用字体图标加jQuery处理,比较方便,但是下面纯css手写解决方式,效果也还不错,对CSS知识也是一个比较好的孔固. 小三角用了2种不同处理方式:1.利用bord ...
随机推荐
- 洛谷3128 [USACO15DEC]最大流Max Flow——树上差分
题目:https://www.luogu.org/problemnew/show/P3128 树上差分.用离线lca,邻接表存好方便. #include<iostream> #includ ...
- 【SDOI2017】套路总结
1 第一题是裸的反演: \[\begin{align} Ans&=\prod_{i=1}^n\prod_{j=1}^ma[(i,j)]\\ &=\prod_{d=1}^na[d]^{f ...
- python变量、变量属性
1.简述执行Python程序的两种方式以及他们的优缺点 答:交互型优点:马上就能看到结果,排错方便.交互型缺点:代码无法保存,断电即消失 命令型优点:代码永久保存.命令型缺点:不易排错 2.简述Pyt ...
- python正则表达式应用 定义一个函数,求字符串中出现的所有整数之和
- 如何建一个Liferay 7的theme
首先附上原文链接Creating theme and Deploying in liferay 7 by using Eclipse 1.第一步:建一个Liferay module 项目,选择them ...
- 【Leetcode 二分】 滑动窗口中位数(480)
题目 中位数是有序序列最中间的那个数.如果序列的大小是偶数,则没有最中间的数:此时中位数是最中间的两个数的平均数. 例如: [2,3,4],中位数是 3 [2,3],中位数是 (2 + 3) / 2 ...
- php实现希尔排序
对于排序的算法我想大家首先想到的事 冒泡排序:快速排序:或者想起选择和插入排序: 今天的讲解并不是以上四种:而是希尔排序: 对18W个数字排序,时间比较(毫秒) 希尔排序 0.1s 就完成了,有点不 ...
- PyCharm使用之利用Docker镜像搭建Python开发环境
在我们平时使用PyCharm的过程中,一般都是连接本地的Python环境进行开发,但是如果是离线的环境呢?这样就不好搭建Python开发环境,因为第三方模块的依赖复杂,不好通过离线安装包的方式安装 ...
- 七.Deque的应用案例-回文检查
- 回文检测:设计程序,检测一个字符串是否为回文. - 回文:回文是一个字符串,读取首尾相同的字符,例如,radar toot madam. - 分析:该问题的解决方案将使用 deque 来存储字符串 ...
- linux下的OpenCV安装&学习笔记
http://www.linuxdiyf.com/viewarticle.php?id=20731 (本想在fedora下安装编译的,但目前opencv官网.sourceforge等网站都无法访问下载 ...