css实现圆角三角形例子(无图片)

时间：2016-09-16 12:42:00 阅读：135 评论：0 收藏：0 [点我收藏+]

标签：

css实现圆角三角形例子(无图片)

以前我们做圆角时都会要用到图片来实现，今天我给大家整理的这款css圆角效果是不需要图片的纯css实现的哦，下面我们一起来看看吧。

效果如下图所示

三角形所对方向"width: 0"，
反向为三角形高度(20)"border-width: 20px"，
反向颜色为三角形颜色"border-color: #eee"，
其它两个方向相加为三角形宽度(30)"border-width: 15px"
CSS:

代码如下	复制代码
span { position: absolute; width: 0; height: 0; border-width: 0 15px 20px 15px; border-style: solid; border-color: transparent transparent #eee transparent; top: -20px; left: 50%; margin-left: -15px; }

例子

代码如下

复制代码

<!DOCTYPE html>
<html>www.111cn.net
<head>
    <title>随心所欲的三角形</title>
    <style>
        div {
            width: 200px;
            height: 60px;
            background-color: #eee;
            position: absolute;
            left: 50%;
            margin-left: -150px;
            margin-top: -50px;
            top: 50%;
            border-radius: 10px;
            float: left;
            font: 12px/20px "微软雅黑";
            color: #000;
            padding: 20px 50px;
        }
        span {
            position: absolute;
            top: -20px;
            width: 0;
            height: 0;
            border-width: 0 15px 20px 15px;
            border-style: solid;
            border-color: transparent transparent #eee transparent;
            left: 50%;
            margin-left: -15px;
        } www.111cn.net
    </style>
</head>
<body>
    <div>
        <span></span>
        三角形所对方向"width: 0"，反对的方向为三角形高度颜色为三角形颜色，其它两个方向相加为宽度
    </div>
</body>
</html>

css实现圆角三角形例子(无图片)

标签：

原文地址：http://www.cnblogs.com/huangf714/p/5876155.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行