CSS中使用border属性来绘制三角形
Posted c.
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了CSS中使用border属性来绘制三角形相关的知识,希望对你有一定的参考价值。
文章目录
CSS中使用border属性来绘制三角形
在网页设计中我们经常会看到如下这样的三角形,今天我们就来使用border属性来实现这些三角形的绘制
首先我们来学习一下CSS的border属性
border-style 属性
border-style 属性指定要显示的边框类型。
允许以下值:
- dotted - 定义点线边框
- dashed - 定义虚线边框
- solid - 定义实线边框
- double - 定义双边框
- groove - 定义 3D 坡口边框。效果取决于 border-color 值
- ridge - 定义 3D 脊线边框。效果取决于 border-color 值
- inset - 定义 3D inset 边框。效果取决于 border-color 值
- outset - 定义 3D outset 边框。效果取决于 border-color 值
- none - 定义无边框
- hidden - 定义隐藏边框
border-style 属性可以设置一到四个值(用于上边框、右边框、下边框和左边框)。
<!DOCTYPE html>
<html>
<head>
<style>
p.dotted border-style: dotted;
p.dashed border-style: dashed;
p.solid border-style: solid;
p.double border-style: double;
p.groove border-style: groove;
p.ridge border-style: ridge;
p.inset border-style: inset;
p.outset border-style: outset;
p.none border-style: none;
p.hidden border-style: hidden;
p.mix border-style: dotted dashed solid double;
</style>
</head>
<body>
<h1>border-style 属性</h1>
<p>此属性规定要显示的边框类型:</p>
<p class="dotted">点状边框。</p>
<p class="dashed">虚线边框。</p>
<p class="solid">实线边框。</p>
<p class="double">双线边框。</p>
<p class="groove">凹槽边框。</p>
<p class="ridge">垄状边框。</p>
<p class="inset">3D inset 边框。</p>
<p class="outset">3D outset 边框。</p>
<p class="none">无边框。</p>
<p class="hidden">隐藏边框。</p>
<p class="mix">混合边框。</p>
</body>
</html>
参考:CSS 边框
border-width 属性
border-width 属性指定四个边框的宽度。
可以将宽度设置为特定大小(以 px、pt、cm、em 计),也可以使用以下三个预定义值之一:thin、medium 或 thick
<!DOCTYPE html>
<html>
<head>
<style>
p.one
border-style: solid;
border-width: 5px;
p.two
border-style: solid;
border-width: medium;
p.three
border-style: dotted;
border-width: 2px;
p.four
border-style: dotted;
border-width: thick;
p.five
border-style: double;
border-width: 15px;
p.six
border-style: double;
border-width: thick;
</style>
</head>
<body>
<h1>border-width 属性</h1>
<p>此属性规定四条边框的宽度:</p>
<p class="one">一些文本。</p>
<p class="two">一些文本。</p>
<p class="three">一些文本。</p>
<p class="four">一些文本。</p>
<p class="five">一些文本。</p>
<p class="six">一些文本。</p>
<p><b>注释:</b>border-color 属性单独使用时不起作用。请首先使用 border-style 属性设置样式。</p>
</body>
</html>
border-width 属性可以设置一到四个值(用于上边框、右边框、下边框和左边框)
p.one
border-style: solid;
border-width: 5px 20px; /* 上边框和下边框为 5px,其他边为 20px */
p.two
border-style: solid;
border-width: 20px 5px; /* 上边框和下边框为 20px,其他边为 5px */
p.three
border-style: solid;
border-width: 25px 10px 4px 35px; /* 上边框 25px,右边框 10px,下边框 4px,左边框 35px */
参考:CSS 边框宽度
border-color 属性
border-color 属性用于设置四个边框的颜色。
可以通过以下方式设置颜色:
- name - 指定颜色名,比如 “red”
- HEX - 指定十六进制值,比如 “#ff0000”
- RGB - 指定 RGB 值,比如 “rgb(255,0,0)”
- HSL - 指定 HSL 值,比如 “hsl(0, 100%, 50%)”
- transparent
注释:如果未设置 border-color,则它将继承元素的颜色
border-color 属性可以设置一到四个值(用于上边框、右边框、下边框和左边框)
p.one
border-style: solid;
border-color: red green blue yellow; /* 上红、右绿、下蓝、左黄 */
参考:CSS 边框颜色
CSS 边框各边
在 CSS 中,还有一些属性可用于指定每个边框(顶部、右侧、底部和左侧):
p
border-top-style: dotted;
border-right-style: solid;
border-bottom-style: dotted;
border-left-style: solid;
参考:CSS 边框各边
CSS Border - 简写属性
为了缩减代码,也可以在一个属性中指定所有单独的边框属性。
border 属性是以下各个边框属性的简写属性:
- border-width
- border-style(必需)
- border-color
p
border: 5px solid red;
参考:CSS 简写边框属性
使用border属性来绘制三角形
上面就简单介绍这么多,大概了解一下就可以了。接下来我们来讲一讲如何使用border属性来绘制三角形。
我们先来看下面一段样式和效果
.a1
width: 100px;
height: 100px;
background-color: yellow;
border-top: 50px solid greenyellow;
border-bottom: 50px solid deeppink;
border-left: 50px solid bisque;
border-right: 50px solid chocolate;
从上面的图我们可以看到,边框交界的地方是有一个三角形的。当我们把div的高度和宽度设置为0就能更加明显的看出来了
.a2
width: 0;
height: 0;
background-color: yellow;
border-top: 50px solid greenyellow;
border-bottom: 50px solid deeppink;
border-left: 50px solid bisque;
border-right: 50px solid chocolate;
可以看到当把高度和宽度都设置为0的时候,就变成一个由四个小三角形形成的正方形。
那我们可以其他部分设置成透明的,只显示一个三角形就能达到我们想要的效果
- 我们可以使用transparent属性来设置透明
.a3
width: 0;
height: 0;
background-color: transparent;
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
border-left: 50px solid transparent;
border-right: 50px solid chocolate;
.a4
width: 0;
height: 0;
background-color: transparent;
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
border-left: 50px solid bisque;
border-right: 50px solid transparent;
.a5
width: 0;
height: 0;
background-color: transparent;
border-top: 50px solid transparent;
border-bottom: 50px solid deeppink;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
.a6
width: 0;
height: 0;
background-color: transparent;
border-top: 50px solid greenyellow;
border-bottom: 50px solid transparent;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
我们还可以把两个三角形拼起来,构造更多不同方向的三角形
.triangle-topright
width: 0;
height: 0;
border-top: 50px solid red;
border-left: 50px solid transparent;
.triangle-bottomleft
width: 0;
height: 0;
border-bottom: 50px solid red;
border-right: 50px solid transparent;
.triangle-bottomright
width: 0;
height: 0;
border-bottom: 50px solid red;
border-left: 50px solid transparent;
- 使用颜色中的rgba实现即可。最后一个数值即是对象的不透明度属性。值为1,完全可视,值为零,完全不可视。半透明效果可设置为0到1的其中任意值,一般取0.5。
.a7
width: 0;
height: 0;
background-color: transparent;
border-top: 50px solid red;
border-bottom: 50px solid rgba(255, 255, 255, 0);
border-left: 50px solid rgba(255, 255, 255, 0);
border-right: 50px solid rgba(255, 255, 255, 0);
以上是关于CSS中使用border属性来绘制三角形的主要内容,如果未能解决你的问题,请参考以下文章
2017年总结的前端文章——border属性的多方位应用和实现自适应三角形
css常用的简写技巧_css background简写css border 简写css font属性简写等