用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;
    }

效果图如下:

时间: 2024-11-03 20:59:17

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

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>

CSS制作三角形和按钮

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

利用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制作三角形 #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 制作三角形 以及 display 、 visibblity属性含义

纯css 制作三角形 .box1{ width:0; height:0; top:-10px; left:15px; position:absolute; border-style:solid; border-width: 0 10px 10px; border-color: transparent transparent #0CF; } 1.display:visibility 的应用对象无论值为何,浏览器都会加载生产此对象的dom结构. 2.visibility:hidden 的应用对象只保

css 制作三角形图标 不支持IE6

.triangle { width: 10px; height: 10px; overflow: hidden; border-left: 4px solid rgba(0, 224, 255, 1); border-right: 4px solid rgb(0, 255, 10); border-top: 4px solid #ff0; border-bottom: 4px solid #ca0309; } 效果: 把10px改成0后: 去掉border-top这一句: 把border-lef

利用CSS制作三角形

在我们看到类似于这样的图片时: 我们一般都会想,哎,这还不简单,用一张图片就可以了. 的确,用图片可以很轻松地做到.不过我们接下来要讨论的是: 如何用css也作出这样的效果. 首先,我们来定义一个div: <div class="up"></div> 然后给它增加一些样式: .up{ width: 50px; height: 50px; background-color: red; font-size: 0px; line-height: 0px; } 结果如图

纯css制作三角形小记

个人理解,使用css画出三角形,其实控制的就是border. 下面效果分别是4个方向的三角形: /*向上*/ .triangle_border_up{ width:0; height:0; border-width:0 30px 30px; border-style:solid; border-color:transparent transparent #333;/*透明 透明 灰*/ } /*向下*/ .triangle_border_down{ width:0; height:0; bord

用css制作三角形,理解

如果真的很难理解的话,就在纸上画那些边框,就容易懂了 1.当如下设置代码并赋给div相应的属性时: #sider2{ width: 100px; height: 100px; border-top: 30px solid #000; border-right: 30px solid #ff0000; border-left: 30px solid #00ff00; border-bottom: 30px solid #0000ff; } 会得到如下的一张图: 2.接着当不设置border-bot