css 实现一个尖角_纯CSS实现页面的尖角、小三角、不同方向尖角的方法小结
效果图:
方法一的效果图:
方法二的效果图:
方法三的效果图:
方法1:因为有背景,所有实现起来比较方便,尖角的内部同个颜色就可以不用考虑遮挡问题
html:
带背景颜色的小三角实现是比较简单的!
css
#top {
position: absolute;
width: 0px;
height: 0px;
line-height: 0px;/*为了防止ie下出现题型*/
border-bottom: 10px solid #89b007;
border-left: 10px solid #fff;
border-right: 10px solid #fff;
left: 76px;
top: -10px;
}
#first {
border-radius:8px;
-moz-border-radius:8px;-ms-border-radius:8px;-o-border-radius:8px;-webkit-border-radius:8px;
position: absolute;
height: 150px;
width: 300px;
background: #89b007;
left: 22px;
top: 33px;
}
#first p{ padding:10px; line-height:1.5; color:#FFF;}
方法2:
html
用面向对象的思想去书写css,用面向对象的心态去书写css。
◆ ◆
css
* {
margin: 0;
padding: 0;
}
a{ color:#666; text-decoration:none; line-height:25px; text-indent:24px;}
.w{ width:200px; position:absolute; background:#999; left:400px; top:200px; font-size:12px; text-align:left}/*模拟灰色阴影背景层*/
.x{ width:180px; position:relative; background:#fff; border:1px solid #ccc; padding:10px; left:-4px; top:-4px;}/*内容div*/
.y , .z{
position: absolute;
left: 141px;
}
.y{
color: #ccc;
font-size: 19px;
top:-12px;
z-index:1;
}/*模拟小三角*/
.z{
color: #fff;
font-size: 19px;
top:-11px; z-index:3;
}/*模拟小三角*/
方法3:
不管写什么内容,总之就是要实现无图小三角,要是有背景颜色那倒是极好的,没有的话也可以,就是稍微麻烦一点
#content {
text-indent: 2em;
box-shadow: 0px 0px 10px #999;
padding: 10px;
font-size: 12px;
line-height: 1.5;
border-radius: 5px;
height: 100px;
width: 250px;
position: relative;
margin: 200px auto;
border: 1px solid #CCC;
}
span {
position: absolute;
left: 25px;
height: 0px;
width: 0px;
}
/*上部小三角实现样式开始*/
span.out {
line-height: 0;
border-width: 10px;
border-color: transparent transparent #CCC transparent;
border-style: dashed dashed solid dashed;
top: -20px;
}
span.iner {
border-width: 10px;
border-color: #fff transparent #FFF transparent;
border-style: dashed dashed solid dashed;
top: -19px;
line-height: 0;
}
/*右部小三角实现样式开始*/
span.right {
background: #FFF;
border-width: 1px;
width: 16px;
height: 16px;
border-color: #CCC #CCC transparent transparent;
border-style: solid solid dashed dashed;
left: 270px;
top: 30px;
border-radius: 0 0 100% 0;/*这里radius的值不要选取绝对值因为在放大或者缩小的过程中会产生封不住口的现象*/
line-height: 0;
box-shadow: 5px 0 10px #aaa;
}
好了,以上所述是小编给大家介绍的CSS实现页面的尖角、小三角、不同方向尖角的方法小结,希望对大家有所帮助。
css 实现一个尖角_纯CSS实现页面的尖角、小三角、不同方向尖角的方法小结相关推荐
- css 实现一个尖角_纯 CSS 实现三角形尖角箭头的实例
上次无意中发现了个使用纯 CSS 实现三角形尖角箭头的方法 ,但没有怎么用上,也没有详细完整的实例,今天刚好要用上,整理了下,写个完整的代码: 无标题文档 .area { margin:100px a ...
- css改火狐滚动条样式_纯css美化滚动条样式
知乎的编辑器对于复制转发文章来说特别不友好(直接复制后代码乱码,字体变化,表格数据丢失),不太想过多重复编辑,只会编辑转发部分到这上面来,如感觉还不错,请跳转到:https://www.emperin ...
- html i标签css 图标,ICONO – 仅一个标签实现的纯CSS图标
ICONO – 仅一个标签实现的纯CSS图标 1月 29, 2015 评论 Sponsor 图标在WEB和APP设备上是很常用的设计元素,有些网站为了兼容高分辨率的显视屏,比如苹果Retina设备,一 ...
- php垂直居中代码_纯css实现水平和垂直居中
有时候我们需要实现一个水平居中和垂直居中的效果.例如你想做一个网页版的PPT,你希望演示的内容区域总是居中.这里介绍一个纯css实现. 水平和垂直居中 body {JQUERY的Deferred应用 ...
- css空心三角形_纯CSS制作空心三角形和实心三角形及其实现原理
纯CSS制作空心三角形和实心三角形及其实现原理 在一次项目中需要使用到空心三角形,我瞬间懵逼了.查阅了一些资料加上自己的分析思考,终于是达到了效果,个人感觉制作三角形是使用频率很高的,因此记录下来,供 ...
- 纯css导航下拉_纯CSS标签导航
纯css导航下拉 The appearence of "tab" navigation is relatively easy to create, but making a tab ...
- java实现星级评分功能_纯CSS的星级评价效果
前言 这种星星评价效果,相信大家这个并不陌生,经常会遇到这个.现在如果要我们自己实现一个,很多人第一反应可能用JS+CSS去实现它.这种方式并没有什么不好的地方,只是我们在复用的时候不是很方便,需要带 ...
- css加号图标_纯CSS制作各种各样的网页图标(三角形、暂停按钮、下载箭头、加号等)...
三角形 .box{ width: 0; height: 0; border-top: 50px solid transparent; border-bottom: 50px solid transpa ...
- 怎么用java做水滴动画_‘纯css实现Material Design中的水滴动画按钮’的js体验优化...
前言 在上一篇,我们已经实现了用纯css实现水滴扩散动画,但是有一些瑕疵,文章结尾处也提到过,一是页面加载进来就会看到按钮上的水滴动画运动一次,二是点击的时候不能根据鼠标的位置来扩散,今天我们来解决这 ...
- java写三角形圆矩形_纯CSS画的基本图形(矩形、圆形、三角形、多边形、爱心、八卦等)...
图形包括基本的矩形.圆形.椭圆.三角形.多边形,也包括稍微复杂一点的爱心.钻石.阴阳八卦等.当然有一些需要用到CSS3的属性,所以在你打开这篇文章的时候,我希望你用的是firefox或者chrome, ...
最新文章
- 【计算理论】计算复杂性 ( 3-SAT 是 NP 完全问题 | 团问题是 NP 完全问题 | 团问题是 NP 完全问题证明思路 )
- Programming Computer Vision with Python (学习笔记六)
- python isalnum函数_探究Python中isalnum()方法的使用
- python云计算服务_python 云计算平台
- 【Elasticsearch】es 报错 no such index index_not_found_exception
- “出题老师”超全划重点,赛场高分必备干货!
- 建立.NET Core控制台应用程序以输出EXE?
- Android Sqite数据库 11
- java验证邮件正则
- 【图论】用链式前向星(邻接表)存有向图(图文代码逐句分析)
- 修改Idea的jdk版本
- poj_3987 Trie图
- android studio 免费实现聊天视频功能
- 揭秘:游戏开发的薪资情况和发展前景!
- 万物互联展示云端生活魅力 5G智能交通开启“懒人时代”
- input type属性
- c语言大数运算知乎,为什么知乎上大多数人不推荐C语言入门?
- 36-雷达图像基本处理
- About Orientation
- 中国 KubeCon + CloudNativeCon 演讲提案征集