【css】巧用border制作三角形

2024-05-10 17:10:24

#css用border制作三角形

1.利用CSS盒模型

盒模型上下左右边框交界处出呈现平滑的斜线. 利用这个特点, 通过设置不同的上下左右边框宽度或者颜色可以得到小三角

调整宽高大小可以调节三角形形状.

2.设置盒子宽高

<style>

.box {

width: 400px;

height: 400px;

background-color: aquamarine;

}

</style>

<div class="box"></div>

3.设置盒子边框

<style>

.box {

width: 100px;

height: 100px;

border-top:100px solid red;

border-bottom: 100px solid red;

border-left: 100px solid yellow;

border-right: 100px solid yellow;

}

</style>

<div class="box"></div>

然后得到上图一个宽高为100px,边框宽度100pxd的盒子

4.接下来把盒子宽高设为0 ，其中三面的border的颜色为透明 transparent

<style>

.box {

width: 0;

height: 0;

border-top:100px solid transparent;

border-bottom: 100px solid red;

border-left: 100px solid transparent;

border-right: 100px solid transparent;

}

</style>

<div class="box"></div>

得到一个宽高为0，下边框为100px，红色的盒子，因为其他三面边框为透明，所以看起来就是一个红色的三角形。

5.制作风车模型

那么利用这个原理，我们就可以在一个大盒子里嵌套四个小盒子，让它们浮动成田字型，改变每个小盒子的边框就可以做一个风车出来了。代码如下：

<style>

.box {

width: 400px;

height: 400px;

background-color: aquamarine;

}

.box1 {

width: 0;

height: 0;

border-top:100px solid transparent;

border-left: 100px solid transparent;

border-bottom: 100px solid yellow;

border-right: 100px solid transparent;

float: left;

}

.box2 {

width: 0;

height: 0;

border-top:100px solid transparent;

border-bottom: 100px solid transparent;

border-left: 100px solid yellow;

border-right: 100px solid transparent;

float: left;

}

.box3 {

width: 0;

height: 0;

border-top:100px solid transparent;

border-bottom: 100px solid transparent;

border-left: 100px solid transparent;

border-right: 100px solid yellow;

float: left;

}

.box4 {

width: 0;

height: 0;

border-top:100px solid yellow;

border-bottom: 100px solid transparent;

border-left: 100px solid transparent;

border-right: 100px solid transparent;

float: left;

}

</style>

<div class="box">

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

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

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

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

</div>

效果图：

【css】巧用border制作三角形相关推荐

CSS 如何用border绘制三角形、等腰梯形、直角梯形
CSS 如何用border绘制三角形.等腰梯形.直角梯形 border 有宽度后,四角交接处会产生斜线,可根据此原理绘制三角形.等腰梯形.直角梯形等图形. div {width: 50px;heigh ...
css border 制作三角形
border 边框上三角是只有上面的border 有颜色,其余的边框都是tranparents,下三角只有下面的border 有颜色,其余的边框都是tranparents,左三角只有左面的bord ...
利用border制作三角形原理
网站前端页面中,有时候会使用一些三角形,除了使用图片的方式之外,利用css的border属性也可以做出相对应的三角形.那么,利用border是如何实现三角形的制作的呢? 先看下面一个例子: CSS代码 ...
html如何把上边角做成椭圆,使用css3的border-radius和border制作半圆、三角、椭圆等各种图形...
自从有了css3,我们可以制作各种各样的图形了,制作圆角也可以不使用图片了,我们可以使用border-radius可以制作圆角,椭圆等图形.下面我们来看一下如何制作这些的(以下例子请在现代高级浏览器浏 ...
html边框如何制作三角形,1分钟解读使用css-border制作小三角
利用css中的border制作小三角形总所周知,元素的边框 (border) 是围绕元素内容和内边距的一条或多条线. CSS border 属性允许规定元素边框的样式.宽度和颜色. 在 HTML 中 ...
css中border制作各种形状
css利用border制作各种形状的原理如图: 使用border绘制三角形是什么原理?事实上,宽度相等的border是以45度对接的,如下图: 没有了上border如图所示: 再设置border的宽度 ...
php绘制一个三角形,如何利用css或html5画出一个三角形？两种不同的制作三角形方法（代码实例）...
我们在平时的前端开发的时候,有时候是需要一些小图形来丰富一下页面效果,比如:下拉列表的倒三角图形.那么这样的一个三角形是如何制作出来的,本章给大家介绍如何利用css或html画出一个三角形?两种不同的 ...
CSS——制作三角形
文章目录前言一.上三角形的制作二.右三角形的制作总结前言本文主要介绍如何利用css制作三角形~ 一.上三角形的制作 1.示例图: 2.方法简介: 1.将宽和高设为0,利用border制作合 ...
h5画三角形_如何利用css或html5画出一个三角形？两种不同的制作三角形方法（代码实例）...
我们在平时的前端开发的时候,有时候是需要一些小图形来丰富一下页面效果,比如:下拉列表的倒三角图形.那么这样的一个三角形是如何制作出来的,本章给大家介绍如何利用css或html画出一个三角形?两种不同的 ...

最新文章

热门文章