css border 制作三角形

border 边框

上三角是只有上面的border 有颜色，其余的边框都是tranparents,下三角只有下面的border 有颜色,其余的边框都是tranparents,左三角只有左面的border 有颜色,其余的边框都是tranparents,右三角只有右面的border 有颜色,其余的边框都是tranparents,

代码

/***三角***//***外层***/#imgMouseOver{    position: absolute;    top:48px;    left:-42px;    width:103px;    -webkit-border-radius:5px;    -moz-border-radius:5px;    border-radius:5px;    border:1px solid #dfdfdf;    background: #fff;    z-index:999;    box-shadow: 2px 2px 2px #ddd;    padding:4px 2px;    display: none;}/***小三角***/#imgMouseOver .sanjiao{    position: absolute;    top:-20px;    left:50%;    width:0px;    margin-left:-3px;    height:0px;    border-width:10px 6px;    border-style:solid;    border-color:transparent transparent #dfdfdf transparent;}#showContent{    height:30px;    line-height:30px;    text-align:center;}

html 代码

<div id=‘imgMouseOver‘><i class=‘sanjiao‘></i> <p id=‘showContent‘></p></div>

时间： 2024-09-30 14:35:44

css border 制作三角形的相关文章

使用CSS border 做三角形口诀赠上

为了方便用border做三角形,省去那繁琐的思考三角朝向的问题,自己搞了个小口诀,分两篇,一篇是普通的三角,一篇是针对直角三角,口诀如下: 普通篇: 方向朝哪哪边无, 颜色反向来弥补直角三角篇: 直角三角分两边, 哪侧无值朝哪边, 具体颜色来填充, 要看直角在哪边, 向上直角填上边, 向下直角填下边, top.bottom俩冤家, 从此永远不想见. 针对普通篇的效果如下: 代码如下: .toLeft { width: 0; height: 0; border-width: 30px 50px

CSS border实现三角形

一.原理 CSS盒模型一个盒子包括:margin+border+padding+content.上下左右边框交界处出呈现平滑的斜线.利用这个特点,通过设置不同的上下左右边框宽度或者颜色可以得到小三角,小梯形等. 调整宽度大小可以调节三角形形状. 示例1: 一般情况下,我们设置盒子的宽高度及上下左右边框,会呈现如下图: #test1 { height: 20px; width: 20px; border-color: #FF9600 #3366ff #12ad2a #f0eb7a; border

CSS手动制作三角形图标

1.需要哪个三角形就 <meta charset="UTF-8"> <title>Title</title> <style> div{ border: 20px solid; border-color: black red yellow green;/*上右下左*/ height: 0; width: 0; } </style> </head> <body> <div></div>

css border制作小三角形状及应用（兼容IE6）

http://caibaojian.com/css-border-triangle.html .text{ height: 0; width: 0; /* 这里设置overflow, font-size, line-height,是因为, * 虽然宽高度为0, 但在IE6下会具有默认的字体大小和行高, * 导致盒子呈现被撑开的长矩形*/ overflow: hidden; font-size: 0; line-height: 0; border-color: #FF9600 transparen

css制作三角形，下拉框三角形

网站制作中常常需要下拉框,而如果下拉框如果只是单纯的矩形则会显得太过单调,所以这次教大家利用css制作三角形放在矩形上面首先利用css制作三角形 div { width:0px; height:0px; border-top:20px solid transparent; border-left:20px solid transparent; border-right:20px solid transparent; border-bottom:20px solid green; } <div>

利用div和css制作三角形效果

利用div和css制作三角形效果:本章节介绍一下如何利用div和css实现三角形效果,虽然看起来表神奇,但是原理是非常的简单.代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>蚂蚁

CSS制作三角形和按钮

CSS制作三角形和按钮用上一篇博文中关于边框样式的知识点,能制作出三角形和按钮. 我先说如何制作三角形吧,相信大家在平时逛网站的时候都会看到一些导航栏中的三角形吧,比如说: 网易首页的头部菜单栏中,也会有这样的三角形当鼠标经过时,三角形会垂直翻转,如下现在我分享制作三角形的做法,主要是利用边框做成的首先,四个三角形合并在一起的正方形,也就是正方形的四条边框形成的四个三角形源代码: <!DOCTYPE html> <html lang="en"> <

css制作三角形

css制作三角形 #triangle-up { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid red; } #triangle-down { width: 0; height: 0; border-left: 50px solid transparent; border-ri

用CSS border相关属性画三角形

效果 HTML: <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>CSS Triangle Demo</title> <link rel="stylesheet" href="triangle.css"> </head> <body&g