html div左边得圆角,html – div倾斜的侧面和圆角
Note: I am adding a separate answer because though the answers that I linked in comment seem to give a solution, this one is a bit more complex due to the presence of border also along with the border-radius.
可以使用以下部件创建形状:
>一个相对定位的主要容器元件.
>两个伪元素,大约是父元素宽度的一半.一个元素倾斜以产生倾斜的左侧而另一个元素不倾斜.
>偏斜的伪元素位于左侧,而普通元素位于容器元素的右侧.
>偏斜的伪元素只有顶部,左边和底部边框.省略右边框,因为它将位于形状的中间.对于未倾斜的伪元素,出于同样的原因避免使用左边界.
>偏斜伪元素的左边界比其他边界更厚一些,因为偏斜使边框看起来比实际更薄.
我还在片段中添加了悬停效果,以展示形状的响应特性.
.outer {
position: relative;
height: 75px;
width: 300px;
text-align: center;
line-height: 75px;
color: white;
text-transform: uppercase;
}
.outer:before,
.outer:after {
position: absolute;
content: '';
top: 0px;
height: 100%;
width: 55%;
background: purple;
border: 2px solid white;
border-left-width: 3px;
z-index: -1;
}
.outer:before {
left: 0px;
border-radius: 20px;
border-right: none;
transform: skew(20deg);
transform-origin: top left;
}
.outer:after {
right: 0px;
border-top-right-radius: 20px;
border-bottom-right-radius: 20px;
border-left: none;
}
/* Just for demo of responsive nature */
.outer{
transition: all 1s;
}
.outer:hover{
height: 100px;
width: 400px;
line-height: 100px;
}
body{
background: lightblue;
}
Call me back
优点:
>这种方法的一大优势是它提供了优雅的后备.也就是说,在非CSS3兼容的浏览器中,它看起来像带有圆角的普通按钮(并且没有倾斜的侧面).
>页面(或容器元素)背景不必是纯色.
>形状本身可以具有非纯色(即图像或渐变)作为背景.它需要一些额外的调整,但方法本身将保持不变.
在下面的代码片段中,我给每个组件添加了不同的颜色,以直观地说明如何实现形状:
.outer {
position: relative;
height: 75px;
width: 300px;
text-align: center;
line-height: 75px;
color: white;
text-transform: uppercase;
}
.outer:before,
.outer:after {
position: absolute;
content: '';
top: 0px;
height: 100%;
width: 55%;
background: purple;
border: 2px solid white;
border-left-width: 3px;
z-index: -1;
}
.outer:before {
left: 0px;
border-radius: 20px;
border-right: none;
transform: skew(20deg);
transform-origin: top left;
background: seagreen;
border-color: red;
}
.outer:after {
right: 0px;
border-top-right-radius: 20px;
border-bottom-right-radius: 20px;
border-left: none;
background: yellowgreen;
border-color: maroon;
}
/* Just for demo of responsive nature */
.outer{
transition: all 1s;
}
.outer:hover{
height: 100px;
width: 400px;
line-height: 100px;
}
body{
background: lightblue;
}
Call me back
html div左边得圆角,html – div倾斜的侧面和圆角相关推荐
- html图片放在文字左侧,CSS如何实现DIV左边图片右边文字 下边LI标签知道
满意答案 bingo803 推荐于 2017.10.10 采纳率:54% 等级:13 已帮助:10659人 *{margin:0;padding:0;} .loop_div{width:500p ...
- [译] 关于CSS中的float和position (父容器div内的子元素div为float时,父元素无法撑开(或高度自适应)的解决方式)
测试案例:http://blog.csdn.net/goodshot/article/details/44408245 当构建页面排版时,有不同的方法可以使用.使用哪一种方法取决于具体页面的排版要求, ...
- js实现鼠标放在div 悬浮显示另一个div内容链接 (不占位置)
js实现鼠标放在div 悬浮显示另一个div内容链接 (不占位置) 代码如下 不喜勿喷 简单记录前端小知识 <div><a id="div1" href=&quo ...
- html div 边框只显示右侧,div 边框原来有这么多种设置方法
在HTML前端斥地中,有数次会对 配置边框. 这里 给DIV加一个边框方式教程,实现div边框款式.经由CSS border花样属性实现加边框. 如下是各类给DIV加分歧边框实例与才具教程.html代 ...
- xHTML+div布局:三个div,两边div宽度固定,中间div宽度自适应
xHTML+div经常考题:三个div,两边div宽度固定,中间div宽度自适应. 和大家分享一个实现方式: 1.html代码 1 <div class="dyleft"&g ...
- html语言div什么意思,css中div是什么意思?
css中div是什么意思? div是html中的一个标签,通常作为容纳其他元素的容器.在css中,表示一种选择器,可以直接使用div(标签选择器)来查找HTML元素设置样式:而如果是.div那么表示某 ...
- php中的div是什么意思,div是什么意思?div标签怎么用
很多刚入门的新手,对div是什么意思还不是很了解,现在很多网站上都有div,那么究竟div是什么意思?下面我们来总结一下div标签怎么用. 一:div是什么意思 我们随便打开一个网页源代码就会发现里面 ...
- div 隐藏_CSS实现六边形Div图片展示效果
一. 效果图 二. 六边形效果涉及到的知识点 1. transform: rotate(120deg); // 元素旋转 2. overflow: hidden; // 超出隐藏 3. visibil ...
- 实现div可以调整高度(div实现resize)
实现div可以调整高度(div实现resize) 一.div 实现resize(类似textarea) 代码如下: <!DOCTYPE html> <html><head ...
最新文章
- java.lang AAPT_android R.java aapt
- com口驱动_手机都没耳机口了,平衡口现在才来是作死还是?
- C++struct和class区别
- 剑指offer_06
- 存放在外存上的数据关机后_小鑫话题 | 惊了!关机后SSD会丢数据?
- java代码内创建mysql索引_点评阿里JAVA手册之MySQL数据库 (建表规约、索引规约、SQL语句、ORM映射)...
- Java 并发编程常识 —— by 梁飞
- 国标:PAAS应用程序管理要求
- 一线工程师如何看待《没了美国的EDA软件,我们就不能做芯片了》
- 906. 超级回文数
- 寺庙招聘爆火:月薪15000,五险一金,早九晚五,周末双休,饭菜免费!网友:想出家了......
- 通过JAVA从高德地图URL连接获取json数据 解析并存入数据库的程序举例
- 刷新浏览器后不进行任何点击操作时,不播放声音 | 解决方案(VUE-Element)
- GM65条形码二维码扫描识别模块与STM32学习
- ae怎么设置gpu渲染_有玩AE的吗?求教GPU渲染问题!!
- 10018801骗子
- 很不错的两款Bootstrap Icon图标选择组件
- Python+pytest+requests 自动化测试框架
- 汉王文本王OCR识别注意事项
- 银联内核与pboc内核的区别(闪付流程)
热门文章
- csv、xml和json
- 商品图片列表html,用html制作一个商品图片列表
- 简单爬虫+pyecharts分析前途无忧招聘职位数量
- 六级作文的3种任务和4类题型
- OpenCV-Python教程:直方图及其绘制(calcHist)
- 西工大NOJ数据结构理论——019.基于图的深度优先搜索策略(耿7.10)
- 基于SSM的java WEB音乐网站
- overleaf表格_LaTeX使用入门之表格
- 我的深圳面试体验--艾默生/西门子/华为/中兴/索尼/富士施乐/长城国际/ 马士基/SGS/宜家/
- 一战成硕之双非二本科班考上中科大软院