如何用CSS3来实现三角形

PetitQ HTML/CSS 2019-2-12 1.38K 0 0

CSS 的出现让网页有了更多的风格，尤其是 CSS3 的应用，让网页呈现了更多好看的效果，那么，css3 中可以有哪些效果呢？如何使用 CSS3 来画一个三角形经常令人非常感到困惑，其实原理上是宽度相等的边距以 45 度来连接。好了原理我们了解了，那么我们就实战一下吧，来实现带小三角形的 div 框。

第一步：新建一个 div

```
<div class="arrow-up">
```
```
     
```
```
</div>
```
```
<div class="arrow-down">
```
```
    
```
```
</div>
```
```
<div class="arrow-left">
```
```
    
```
```
</div>
```
```
<div class="arrow-right">
```
```
    
```
```
</div>
```

也想出现在这里？联系我们吧

第二步：新建 CSS3

下面用 CSS3 分别实现向上、下、左、右的三角形

```
/*箭头向上*/
```
```
.arrow-up {
```
```
    width:0; 
```
```
    height:0; 
```
```
    border-left:30px solid transparent;
```

    border-right:30px solid transparent;

```
    border-bottom:30px solid #fff;
```
```
}    
```
```
 /*箭头向下*/
```
```
.arrow-down {
```
```
    width:0; 
```
```
    height:0; 
```
```
    border-left:20px solid transparent;
```

    border-right:20px solid transparent;

```
    border-top:20px solid #0066cc;
```
```
}
```
```
/*箭头向左*/
```
```
.arrow-left {
```
```
    width:0; 
```
```
    height:0; 
```
```
    border-top:30px solid transparent;
```

    border-bottom:30px solid transparent;

```
    border-right:30px solid yellow; 
```
```
}
```
```
/*箭头向右*/
```
```
.arrow-right {
```
```
    width:0; 
```
```
    height:0; 
```
```
    border-top:50px solid transparent;
```

    border-bottom: 50px solid transparent;

```
    border-left: 50px solid green;
```
```
}
```

实现效果如图

好了原理我们了解了，那么我们就实战一下吧，来实现带小三角形的 div 框。

HTML 代码

```
<div class="entry">
```

    <div class="entry-trangle"><!--本Div只来实现三角形，无其他作用--></div>

```
    hello，我出生了<br/>
```
```
    hello，我出生了<br/>
```
```
    hello，我出生了<br/>
```
```
    hello，我出生了<br/>
```
```
</div>
```

挂载有类"entry-trangle"的 div 只用来实现小三角形。对这个 div 用 css3 的 transparent 实现三角形，然后绝对定位、设置 z-index:-1;、margin-left:-19px;，看下面 css 代码：

```
<style type="text/css">
```
```
    *{margin:0;padding:0;}
```
```
    body{
```
```
        background:#666;
```

        font:14px/20px "Microsoft YaHei";

```
    }
```
```
    .entry{
```
```
        margin:0 auto;
```
```
        margin-top:20px;
```
```
        width:280px;            
```
```
        background:#fff;
```
```
        padding:10px;
```
```
 
```
```
        /*设置圆角*/
```
```
        -webkit-border-radius:5px;
```
```
        -moz-border-radius:5px;
```
```
        border-radius:5px;
```
```
    }
```
```
    .entry-trangle{
```
```
        position:absolute;
```
```
        margin-left:-19px;
```
```
        width:0;
```
```
        height:0;
```

        border-top:10px solid transparent;

        border-bottom:10px solid transparent;

```
        border-right:10px solid #fff;
```
```
        z-index:-1;
```
```
    }
```
```
</style>
```

border-radius:5px;用来实现圆角；绝对定位、z-index:-1;的目的都是使控制小三角形的 div 在最底层，不影响父级 div 里面的内容布局。

如何用 CSS3 来实现三角形

已有 345 人购买

永久更新：
演示数据：

立即购买

查看演示升级 VIP 立刻购买

炫酷企业建站作品展示WordPress中文模板

Supro - 极简电商网站模板WordPress汉化主题

Photon - 全屏摄影相册产品展示网站WordPress汉化主题

HTML/CSS

如何用CSS3来实现三角形

第一步：新建一个 div

第二步：新建 CSS3

HTML 代码

如何用 CSS3 来实现三角形

相关文章

Firefox 火狐浏览器获得图片base64字符串的方法

如何给自己的网站添加WEB社交分享按钮

iframe 嵌入网页自动延伸高度保持嵌入网页高度

发表回复取消回复

热销模板

HTML/CSS

第一步：新建一个 div

第二步：新建 CSS3

HTML 代码

如何用 CSS3 来实现三角形

相关文章

发表回复 取消回复

热销模板

发表回复取消回复