css3实现三角形

阳光穿透心脏的1/2处 2022-09-04 00:47 229阅读 0赞

1.

![20210809135923946.png][]

<div class="upper"></div>

.upper {
    				width: 0;
    				height: 0;
    				border-right: 50px solid transparent;
    				border-left: 50px solid transparent;
    				border-bottom: 50px solid #000;
    
    			}

2.

![20210809140013364.png][]

<div class="lower"></div>

.lower {
    				width: 0;
    				height: 0;
    				border-right: 50px solid transparent;
    				border-left: 50px solid transparent;
    
    				border-top: 50px solid #000;
    
    			}

3.

![20210809140131598.png][]

<div class="left"></div>

.left {
    				width: 0;
    				height: 0;
    				border-top: 50px solid transparent;
    				border-bottom: 50px solid transparent;
    				border-right: 50px solid #000;
    
    			}

4.

![2021080914014599.png][]

<div class="right"></div>

.right {
    				width: 0;
    				height: 0;
    				border-top: 50px solid transparent;
    				border-bottom: 50px solid transparent;
    				border-left: 50px solid #000;
    
    			}

[20210809135923946.png]: /images/20220829/5084c2a272f9495e9d63c2dade8a877c.png
[20210809140013364.png]: /images/20220829/264bee8495104f078589d3e5896bcf01.png
[20210809140131598.png]: /images/20220829/55814324fa454b13a0414a72bae06891.png
[2021080914014599.png]: /images/20220829/d76a3195f0dc4569a2b770b12ec54842.png

发表评论取消回复

表情：

评论列表（有 0 条评论，229人围观）

还没有评论，来说两句吧...

相关阅读

相关 css3实现三角形

原理：一个高宽相等的正方形，选取你所需要的某一边，截取之，就是一个梯形，当高宽都为0，且其他边为透明颜色时，一个三角形就出来了 .arrow{ width:

末蓝、/ 2023年07月24日 08:36/ 0 赞/ 13 阅读

相关 CSS实现三角形

实现三角形的原理就是不给标签元素设置高度，然后给标签只设置外边框，从而实现三角形，例如： <!DOCTYPE html> <html lang="en">

快来打我*/ 2023年05月31日 02:41/ 0 赞/ 30 阅读

相关 Css实现三角形

背景色三角形，只需改变 transparent（透明色）就可改变方向，border-color 依次为上右下左 <div class="border-down"><

客官°小女子只卖身不卖艺/ 2022年09月11日 05:24/ 0 赞/ 224 阅读

相关 css3实现三角形

1. ![20210809135923946.png][] <div class="upper"></div> .upper { widt

阳光穿透心脏的1/2处/ 2022年09月04日 00:47/ 0 赞/ 230 阅读

相关 css实现三角形

css可以实现各种各样的三角形，减少了切图加载图片，以下是各种三角形的实现方法。 1.首先设置一个盒子的三边为不同的颜色，看下边框是怎么显示的。 <html>

喜欢ヅ旅行/ 2022年07月12日 07:08/ 0 赞/ 273 阅读

相关 CSS3实现三角形效果

原文：[Magic of CSS border property][] 译文：不可思议的CSS border属性译者：dwqs 在CSS中，其border属性有很多的规

Bertha 。/ 2022年06月12日 22:38/ 0 赞/ 363 阅读

相关 CSS3 三角形

使用纯CSS绘制图片可以减少请求位图带来的网络开销，提高渲染速度。 CSS绘制三角形主要利用了——当元素的宽高慢慢缩小为0时，4个边框也会由梯形逐渐变为三角形。常和b

约定不等于承诺〃/ 2022年05月27日 06:45/ 0 赞/ 216 阅读

相关 css实现三角形

首先我们来看一下这种效果： div\{ width: 0; height: 0; border-left: 80px solid red;

旧城等待，/ 2022年05月15日 00:57/ 0 赞/ 293 阅读

相关 css3实现三角形、等腰梯形

三角形 <div class="box"></div> .box { width:0px; height:0px; b

不念不忘少年蓝@/ 2021年11月01日 19:24/ 0 赞/ 802 阅读

相关 CSS实现三角形

三角形是我们在开发中常用的，比如点击展开某个树状菜单，右边本来是向右的小箭头，然后变为向下，类似的场景很多。那么怎么简单的用css实现一个三角形呢？话不多说，上代码：

Myth丶恋晨/ 2021年09月18日 17:40/ 0 赞/ 473 阅读