html设置尖角,CSS为div添加尖角样式
先来看一下尖角效果
一个div,右侧边框的上出现了一个尖角的形状。那么如何来实现这么一个效果呢?
1.原理
对于一个块级元素,但我们分别将元素的上下左右四个border设置成一个比较大的像素(如10px),样式设置成solid ,分别设置成不同的颜色的时候,同时将元素的width,height设置为0.这时我们将会看到四条边均呈现为三角形的形状。如图:
其CSS样式为:
.element{
width: 0px;
height: 0px;
border-top: 20px solid aqua;
border-right: 20px solid #760000;
border-bottom: 20px solid blue;
border-left: 20px solid darkkhaki;
}
四个三角形分别是四条border四条border所呈现出来的,而我们最终的效果好像跟一个三角形的关系比较大些。如果得到一个三角形呢?其实这个很简单,我们只需要把其余三条border颜色属性设置为transparent(透明)的样式,另一个border的颜色属性保持不变。
.element{
width: 0px;
height: 0px;
border-top: 20px solid transparent;
border-right: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 20px solid darkkhaki;
}此时的效果:
好了,三角形出来了。那我们也就实现了最为关键的的地方。我们在弄出来一个白色的三角形,然后将白色三角形覆盖到这个有色三角形之上,但是不能完全覆盖,让其露出一个尖角的效果来。这就是基本的原理。
2.实现
首先需要一个div容器,设置border,width,height的属性,同时将设置其为相对定位。
.angle-wrapper {
width: 300px;
height: 200px;
position: relative;
margin: 20px auto;
border: 2px solid #cccccc;
}
然后需要为这个在这个div右边框上添加两个三角形,一个三角形颜色与边框颜色相同,另一个三角形颜为白色,用于覆盖第一个三角形颜色的一部分。
这里我们使用元素的伪选择器:before,:after来加入这两个三角形,before和after默认为行内元素,所以首先要将其设置为块级元素,绝对定位。
首先添加before伪选择器,用它来生成与border颜色的相同的第一个三角形,并将其定位到左边框上。
.angle-wrapper:before {
content: '';
width: 0;
height: 0;
border: 20px solid transparent;
border-left-color: #cccccc;
position: absolute;
left: 100%;
top: 50%;
margin-top: -20px;
}
然后添加after伪选择器,用它生成一个白色的三角形,并将其定位到左边框上。这里需要注意的是白色三角形的大小要比有色三角形要小一些,小多少要根据div边框的大小而定。我这里边框为2px,所以白色三角形就比灰色三角形就小两个px。这样可以避免白色三角形将灰色三角形全覆盖,然后可以产生尖角的效果来。(我这里说的大小就是设置三角形时的border的px值,如after这里是18px,before那里是20px)
.angle-wrapper:after {
content: "";
width: 0;
height: 0;
border: 18px solid transparent;
border-left-color: #FFFFFF;
position: absolute;
left: 100%;
top: 50%;
margin-top: -18px;
}用绝对定位将这个白色三角形定位到左边框上,覆盖掉灰色三角形的一部分,留下一个尖角。好了,最终的效果就是这样的。
完成。
html设置尖角,CSS为div添加尖角样式相关推荐
- html怎么添加5px高的线,css给div添加0.5px的边框
具体代码实现如下: border div{ position: relative; width: 100%; background-color: #fff; } div:before{ content ...
- 使用css给div添加四角边框的方法
使用css给div添加四角边框的方法 div添加四角边框,一般写法,我们会在四角分别放一个小方块设置边框,来实现效果,但当我们使用vue,或者需要封装称组件时,例如大屏的展示,如果将边框也封单独的组件 ...
- css给div添加阴影
css给div添加阴影 <style type="text/css"> .mydiv{width:250px; height:auto;border:#909090 1 ...
- CSS给元素添加边框(样式、颜色、宽度)
给元素添加边框 CSS边框属性允许你指定一个元素边框的样式和颜色, 和边框宽度. 可以使用 border 属性将边框样式,颜色,和宽度 一起设置. 如果不设置其中的某个值,也不会出问题,比如 bord ...
- 用纯CSS和DIV绘制播放按钮样式
最近在做前端的视屏监控播放对接,前端弄了个播放按钮,记录下,效果如图所示: HTML代码: <div className="box"><div className ...
- html文字往右边偏移怎么做,div向右偏移设置 css让div靠右移必定距离
转自:https://www.thinkcss.com/shili/1372.shtmlcss div对象盒子向右偏移设置,使用css让div靠右必定距离-div向右移教程实例篇html div向右偏 ...
- css阴影怎么添加,css如何为div添加阴影效果
本文为大家分享了css为div添加阴影的方法,希望可以帮助到大家. (相关推荐:CSS教程) 代码实现: .mydiv{ width:250px; height:auto; border:#90909 ...
- html上div加滑轮,css如何实现给div添加滚动并隐藏滚动条
css 给div添加滚动并隐藏滚动条 ,具体代码如下所示: 在html中 下面内容会单独滚动 1111111111111111 222222222222222 333333333333333 4444 ...
- 如何让div靠右_div向右偏移设置 css让div靠右移一定距离
转自:https://www.thinkcss.com/shili/1372.shtml div对象盒子向右偏移设置,使用css让div靠右一定距离-div向右移教程实例篇 div向右偏移一定距离,可 ...
- 纯css在div上添加小三角
纯css在div上添加小三角 有些项目中会遇到这样的需求,就是div容器上要突出来一个小三角,如下图 虽然在功能上没啥意义,但是人家UI就是要这个小三角,你能怎么办,咱必须给他整出来! 我们用伪类和b ...
最新文章
- 舒工自定义AJAX-lite 1.0实用型极简方法
- pig 的chararry类型不能用比较运算符comparison operator
- python十进制转二进制循环_python十进制转二进制的详解
- 人生最浪费生命的四件事,2017年别再做了!
- 【Scratch】青少年蓝桥杯_每日一题_5.07_猜数字
- 面向对象PHP之静态延迟绑定
- 编码-京东实习笔试编程题-生日礼物-动态规划
- html5下input的placeholder标签兼容ie9
- 基于JAVA+SpringMVC+MYSQL的酒店客房管理系统
- perl index和rindex的用法
- 程序员面试金典——18.7最长合成字符串
- # 学号20155308 2006-2007-2 《Java程序设计》第4周学习总结
- Linux音频驱动-声音采集过程
- 面试官最爱的volatile关键字
- 在Win7中IIS配置Asp.Net虚拟文件夹的方法及错误总结!
- k 均值算法(k-means)
- 听说你不会用Lumion做通道图?
- 傅里叶变换分析之掐死教程
- 一个项目的流程和前期的准备工作
- 算法基础17 —— 单调栈(Acwing 830 单调栈)
热门文章
- 英语读音(一) English Pronounciation
- x86架构应用如何向Arm架构低成本迁移
- 关于Vue使用es6模板字符串没反应的问题
- 安装pytorch详细教程
- ps中怎么调整字体间距
- 行业边缘丨中国电科发布“海雀”处理器;中科海微获千万融资;联想发布边缘服务器;风河加入CNCF云原生计算基金会成为银牌会员;...
- 《数学建模方法与分析》(《Mathematical Modeling》)读书笔记
- Python中三个双引号的作用是什么?
- 计算机管理服务无法显示,打印机属性无法打开,始终显示: 无法显示计算机属性. 后台打印程序服务未运行....
- 《创业时代》原型:为什么Talkbox、子弹短信都失败了?