一、实现原理

其实实现的原理很简单，就是通过css的border属性进行制作。那么为什么border属性这么神奇可以制作我们的三角形呢？因为border的本质就是三角形，我们来看看下面这个例子：
html代码：

<div class="box1"></div>

css代码：

.box1 {width: 0;height: 0;border-top: 40px solid pink;border-bottom: 40px solid skyblue;border-left: 40px solid rosybrown;border-right: 40px solid yellowgreen;
}

效果图如下所示，可以看出，其实每个border本质都是一个三角形，那如果我们只需要一个三角形，那么就可以把其他三个边的三角形进行一个隐藏，这样就可以得到我们想要的一个三角形啦。

二、三角形制作案例

1.一个简单的三角形

知道原理之后，制作一个三角形就很容易啦，只需要将元素的宽高都设置为0，让四边的border都为三角形，然后设置其他三个边框都为透明即可。

html代码：

<div class="box2"></div>

css代码：

.box2 {width: 0;height: 0;border: 40px solid;border-color: pink transparent transparent transparent;border-width: 40px 40px 0;
}

注意点：如果只是设置颜色透明，那么其实其他三个边框在页面中都还依旧占据着位置，如上图所示，三角形距离顶部有一定的距离，这就是因为上三角形在页面中依旧占据着位置导致的。
如果需要清除其在页面中所占据的位置，需要设置border-width属性让其它边的边框宽度为0。于是添加以下CSS代码：

border-width: 0 0 40px 0;

效果图：

但是效果并不是我们想要的，这时后你会发现页面中连我们的三角形都不存在了，这是因为我们设置了其他三个边框的宽度都为0，如下图示，红色为设置上边框为0，此时对我们想要展示的下边框没有影响，而蓝色和绿色部分这是设置左右边框为0，这时会影响到下边框，使其也没有宽度，而为0。

所以正确的做法是，只将想要保留的三角形的对边框的宽度设置为0即可，即添加以下CSS代码：

border-width:  0 40px 40px;

效果图：

2.直角三角形

通过上面的例子解析，那直角三角形的实现就很容易了，思路是这样：先同上制作一个三角形出来，根据需要去设置改边框左右两边任意一边的宽度为0，即可实现直角三角形的制作。
html代码：

<div class="box3"></div>

css代码：

.box3 {width: 0;height: 0;border: 40px solid;border-color: pink transparent transparent transparent;border-width: 0 40px 40px 0;
}

效果图：

3.带边框的三角形

带边框的三角形就是三角形的外面有一层不同颜色的边框。
由于我们的三角形本身就是利用border实现的，所以我们这里不能继续通过border方式为三角形设置边框，但是我们可以使用定位法将两个比例一致大小不一的三角形重叠在一起实现带边框三角形的效果。
具体实现：先创建一个三角形元素，该三角形元素作为底部（即边框）尺寸应大些，然后再为其创建一个子元素，也是一个三角形，作为三角形的内容，并通过子绝父相定位该元素到合适的位置。
html代码：

<div class="box4"><div class="box5"></div>
</div>

css代码：

.box4 {width: 0;height: 0;border: 40px solid;border-color: transparent transparent transparent pink;border-width: 40px 0 40px 40px;position: relative;
}
.box5 {width: 0;height: 0;border: 32px solid;border-color: transparent transparent transparent skyblue;border-width: 32px 0 32px 32px;position: absolute;top: -32px;left: -37px;
}

欢迎反馈文中表述不准确的地方或是不足之处~

CSS - 制作三角形相关推荐

制作京东快递查询 css制作三角形
这是我学习前端道路上制作的一个小案例,想把这些记下来,记录我的学习经历和更加熟练的掌握代码..这个案例是当我们在下面输入数字时上面的盒子会放大的显示出来,效仿的是京东快递查询单号.好了,废物不多说,上 ...
CSS——制作三角形
文章目录前言一.上三角形的制作二.右三角形的制作总结前言本文主要介绍如何利用css制作三角形~ 一.上三角形的制作 1.示例图: 2.方法简介: 1.将宽和高设为0,利用border制作合 ...
html+css制作三角形
今天我们来分享一下三角形的制作方法主要就是通过调整div的几个边框线,将它们调节的足够宽,然后再将div的宽度和长度重新赋值为0 代码如下: <div id="main"& ...
利用css制作三角形
1.首先制作一个正方形只设置边框 2.除了上边框其它边框都设置透明色(transparent) <style>div {width: 100px;height: 100px;border: ...
html css拖拽设计,css绘制三角形和 HTML拖拽事件
利用css制作三角形利用设置边框的三个边的长度和border实现三角形设置,并隐藏其他边例子:#yz3{ display: inline-block; 0; height: 0; border-t ...
php绘制一个三角形,如何利用css或html5画出一个三角形？两种不同的制作三角形方法（代码实例）...
我们在平时的前端开发的时候,有时候是需要一些小图形来丰富一下页面效果,比如:下拉列表的倒三角图形.那么这样的一个三角形是如何制作出来的,本章给大家介绍如何利用css或html画出一个三角形?两种不同的 ...
css制作tips提示框，气泡框，制作三角形
有时候我们的页面会需要这样的一些提示框或者叫气泡框,运用css,我们可以实现这样的效果. 为了实现上面的效果,我们首先要理解如何制作三角形. 当我们给一个DIV不同颜色的边框的时候,我们可以得到下面的 ...
【css】巧用border制作三角形
#css用border制作三角形 1.利用CSS盒模型盒模型上下左右边框交界处出呈现平滑的斜线. 利用这个特点, 通过设置不同的上下左右边框宽度或者颜色可以得到小三角调整宽高大小可以调节三角形形 ...
css空心三角形_纯CSS制作空心三角形和实心三角形及其实现原理
纯CSS制作空心三角形和实心三角形及其实现原理在一次项目中需要使用到空心三角形,我瞬间懵逼了.查阅了一些资料加上自己的分析思考,终于是达到了效果,个人感觉制作三角形是使用频率很高的,因此记录下来,供 ...

CSS - 制作三角形

目录

一、实现原理

二、三角形制作案例

1.一个简单的三角形

2.直角三角形

3.带边框的三角形

CSS - 制作三角形相关推荐

最新文章

热门文章