CSS实现DIV三角形

本文内容收集来自网络

#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-right: 50px solid transparent;border-top: 100px solid red;
}

#triangle-left {width: 0;height: 0;border-top: 50px solid transparent;border-right: 100px solid red;border-bottom: 50px solid transparent;
}

#triangle-right {width: 0;height: 0;border-top: 50px solid transparent;border-left: 100px solid red;border-bottom: 50px solid transparent;
}

#triangle-topleft {width: 0;height: 0;border-top: 100px solid red;border-right: 100px solid transparent;
}

#triangle-topright {width: 0;height: 0;border-top: 100px solid red;border-left: 100px solid transparent;
}

#triangle-bottomleft {width: 0;height: 0;border-bottom: 100px solid red;border-right: 100px solid transparent;
}

#triangle-bottomright {width: 0;height: 0;border-bottom: 100px solid red;border-left: 100px solid transparent;
}

<!-- 外框 -->
<div class="mod-container"><!-- 小三角部分 --><div class="mod-triangle"><div class="t-border"></div><div class="t-inset"></div></div>
</div>

/*外框容器*/
.mod-container {width:100px;height:60px;border:1px solid #000;margin:20px;background:#fff;
}
/*小三角部分*/
.mod-triangle {display:block;position:relative;left:-23px;top:18px;z-index:20;
}
.mod-triangle .t-border,
.mod-triangle .t-inset{left:0px;top:0px;width:0;height:0;font-size:0;overflow:hidden;position:absolute;border-width:12px;/*可在此处更改小三角方向：上-右-下-左（solid的位置）*/border-style:dashed solid dashed dashed;
}
/*小三角的边框，如果不需要，可将颜色值改变*/
.mod-triangle .t-border{border-color:transparent #000 transparent transparent;left:-1px;
}
.mod-triangle .t-inset{border-color: transparent #fff transparent transparent;
}

CSS实现DIV三角形相关推荐

html div三角形,css+div打造三角形(箭头)
在很多网站都见过这样的箭头 ,之前我一直以为是图片,直到今天才知道原来可以用css做.开始看代码没太看懂,后来自己试了几遍才恍然大悟.贴出来分享下.(大神请直接忽略) 先看代码: HTML部分就是一个 ...
html5 css 三角形,css怎么画三角形？
css怎么画三角形?下面本篇文章就来给大家介绍一下使用CSS画三角形的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. css怎么画三角形? 三角形实现原理:宽度width为0: ...
html怎么添加5px高的线,css给div添加0.5px的边框
具体代码实现如下: border div{ position: relative; width: 100%; background-color: #fff; } div:before{ content ...
使用CSS画一个三角形
效果图全部代码 <!DOCTYPE html> <html> <head><title></title><style type=&q ...
[css] CSS画一个三角形，CSS绘制空心三角形
1.不同理解的边框 <div class="border"></div> .border {width: 50px;height: 50px;border: ...
用css画一个三角形
用css画一个三角形 HTML: <div id="delta"></div> CSS: #delta{width: 0;height: 0;border- ...
如何用CSS画一个三角形？
hello,大家好,最近在看前端的八股,里面有这样一道题,如何用CSS画出三角形?我想以这个题为例,仔细讲一下这个题的技巧,以及对这道题拓展一下,即如何画出圆形和椭圆形? 首先,如何用CSS画一个三角 ...
html语言div什么意思,css中div是什么意思？
css中div是什么意思? div是html中的一个标签,通常作为容纳其他元素的容器.在css中,表示一种选择器,可以直接使用div(标签选择器)来查找HTML元素设置样式:而如果是.div那么表示某 ...
html中div不在火狐居中,Firefox嵌套CSS中div标签居中问题解决方法
本文和大家重点讨论一下Firefox嵌套CSS中div标签的居中问题的解决方法,主要包括使用line-height垂直居中,清除容器浮动,不让链接折行,始终让Firefox显示滚动条等内容. Fire ...

CSS实现DIV三角形

CSS实现DIV三角形相关推荐

最新文章

热门文章