用css制作三角形
用css制作三角形,主要是利用css元素给“盒模型”设置边框得到的。
上图,上边框和做边框,以及上边框和右边框的交合处,浏览器会按照直角的二分之一处绘制交合线。这是“盒模型”有宽和高时候的效果。我们假设一下,如果把宽和高设置成0px,同时让边框的宽度更宽一点情况会怎样那?css代码如下:
.tip1{
width:0px;
height:0px;
border-width:20px;
border-style:solid;
border-color:#f60 #f00 #0f0 #00f;
overflow:hidden;
}
效果图如下:
当把“盒模型”的宽和高都设置成0px时,“盒模型”的每条边都变成了三角形,那如果我们需要一个向下的三角形,是不是把左、右、下的边设置成透明就可以了那?我们看一下效果:
.tip2{
width:0px;
height:0px;
border-width:20px;
border-style:solid;
border-color:#f60 transparent transparent transparent;
overflow:hidden;
}
是的,我们得到了向下的三角形了,只不过这个三角形比较扁平,不太美观。我们需要调整一下。既然是向下的三角形,我们可以让它的下边框的宽度为0,只设置上边框,来控制整个三角形的高度,设置左右边框来控制三角形的宽度。代码修改如下:
.tip3{
width:0px;
height:0px;
border-width:20px 10px 0px 10px;
border-style:solid;
border-color:#f60 transparent transparent transparent;
overflow:hidden;
}
效果如下:
现在看起来好多了。同理我们也可以根据需求制作朝左、右、上的三角行了,大家可以回去试一下。
附:结合css3三角形的应用,代码如下:
<p class="box">哈哈我是测试代码</p>
.box{
width:800px;
padding:10px;
min-height:40px;
background:#a6dadc;
position:relative;
}
.box::after{
content:"";
display:block;
width:0px;
height:0px;
border-width:10px 20px 10px 0px;
border-style:solid;
border-color:transparent #a6dadc transparent transparent;
position:absolute;
left:-20px;
top:10px;
}
效果图如下:
用css制作三角形的更多相关文章
- CSS制作三角形和按钮
CSS制作三角形和按钮 用上一篇博文中关于边框样式的知识点,能制作出三角形和按钮. 我先说如何制作三角形吧,相信大家在平时逛网站的时候都会看到一些导航栏中的三角形吧,比如说: 网易首页的头部菜单栏中, ...
- CSS 制作三角形原理剖析
使用css制作三角形其实原理很简单,下面一步步解析. 1.html代码如下 <div class="triangle"> </div> 2.CSS代码 .t ...
- css制作三角形,下拉框三角形
网站制作中常常需要下拉框,而如果下拉框如果只是单纯的矩形则会显得太过单调,所以这次教大家利用css制作三角形放在矩形上面 首先利用css制作三角形 div { width:0px; height:0p ...
- 利用CSS制作三角形
在我们看到类似于这样的图片时: 我们一般都会想,哎,这还不简单,用一张图片就可以了. 的确,用图片可以很轻松地做到.不过我们接下来要讨论的是: 如何用css也作出这样的效果. 首先,我们来定义一个 ...
- css制作三角形
#triangle-up { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid tr ...
- css 制作三角形图标 不支持IE6
.triangle { width: 10px; height: 10px; overflow: hidden; border-left: 4px solid rgba(, , , ); border ...
- 用css制作一个三角形箭头
剑走偏锋——用css制作一个三角形箭头 通常,我们做上图那个三角形,一般都是做张图,而且需要两张,因为一般都是下拉菜单的效果,需要有个hover的样式,箭头是反的.那是不是有更好的办法呢,毕竟要用 ...
- css制作tips提示框,气泡框,制作三角形
有时候我们的页面会需要这样的一些提示框或者叫气泡框,运用css,我们可以实现这样的效果. 为了实现上面的效果,我们首先要理解如何制作三角形. 当我们给一个DIV不同颜色的边框的时候,我们可以得到下面的 ...
- 纯CSS制作空心三角形和实心三角形及其实现原理
纯CSS制作空心三角形和实心三角形及其实现原理 在一次项目中需要使用到空心三角形,我瞬间懵逼了.查阅了一些资料加上自己的分析思考,终于是达到了效果,个人感觉制作三角形是使用频率很高的,因此记录下来,供 ...
随机推荐
- Ajax-数据格式-xml,json
xml demo testDataXml <%@ page language="java" contentType="text/html; charset=UTF- ...
- 更换用installshield打包生成exe文件的图标【转】
最近在研究用installshield2010为自己做的产品打包,自己在网上找写资料,胡乱折腾,最后弄成了一个exe安装包,想要修改exe文件的图标,发现Basic MSI project 无法用in ...
- CSS之图片关闭
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- ASP连接ACCESS数据库
Set conn2 = Server.CreateObject("ADODB.Connection") conn2.Open "Provider=Microsoft.Je ...
- oracle 所有下级
--所有下级 SELECT SAP_ORGAN_CODE FROM SAP_ORGAN_LEVEL CONNECT BY PRIOR SAP_FATHER_ORGAN_CODE= SAP_ORGAN_ ...
- insert---插入记录
insert into table_name (column1,column2,.......) values(value1,value2,......); 例: insert into userin ...
- 如何让Eclipse的智能提示像VS一样霸气
说起来用 Eclipse 也有一段时间了,相信每一个用过的人都知道他的智能提示功能真的是糟糕透了,与 VisualStudio2008 简直不是一个档次的!我就纳闷了,他为什么不弄好一点呢!今天我实在 ...
- Android应用资源--之属性(Attribute)资源
原文链接: http://wujiandong.iteye.com/blog/1184921 属性(Attribute)资源:属于整个Android应用资源的一部分.其实就是网上一堆介绍怎么给自定义V ...
- CSS笔记——padding,margin为百分比计算时的参照对象
div的padding为百分比的两种情况 padding-top,padding-bottom,margin-top,margin-bottom是百分比时是按照当前元素的父级元素的宽度来计算的 1. ...
- 百度云管家-V4.6.1-单文件版绿色版
转载说明 本篇文章可能已经更新,最新文章请转:http://www.sollyu.com/baidu-is-clouds-butler-v4-6-1-single-file-green-edition ...