使用css中的border绘制三角形的方法和原理

实现

首先看看怎么实现的贴上代码;


<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>title>
    <style>
        .sjx{
            width: 0px;
            height: 0px;
            border-width: 40px;
            border-style: solid;
            border-color: transparent transparent transparent red;
        }
    style>
head>
<body>
    <div class="sjx">div>
body>
html>

效果图:

使用css中的border绘制三角形的方法和原理_第1张图片


分析代码

主要代码就是style中的border样式。首先宽高设为0,border-width就是三角形的高度,border-color(上,右,下,左)这里把前三个设置为透明,第四个设置为红色,所以三角形方向是向右的。
为了方便理解,这里把border-color四个颜色都设置出来看看
使用css中的border绘制三角形的方法和原理_第2张图片


这里可以这么理解:由于div宽高设置为0,而边框为40px就会出现一个80*80的正方形,上下左右平分则是四个三角形。但如果不设置下边框而设置其他三个边框则会如下图:
使用css中的border绘制三角形的方法和原理_第3张图片


从这里可以看出没了下边框就变成了40*80的长方形,所以实质上这个正方形还是4个40*80的矩形拼成的。
但是如果只设置左右,或者上下的边框则什么也没有,因为div长宽都为0,则显示不出来,这里之所以会显示是因为上下和左右至少各有一个,会互相赋值,比如上边框高度为40px由于没有宽度则不显示,此时如果设置一个左边框会把左边框的高40px赋值给上边框的框则会显示出来。

你可能感兴趣的:(HTML/CSS)