用三角形创建一个三角形原理

用纯CSS创建一个三角形的原理

    • 一.原理
    • 实现效果
      • 1.必须是块元素,设置边框
      • 2.把宽和高都设置为0
      • 3.把border-bottom去掉
      • 把左右边框设置为透明(transparent)

一.原理

采用均分原理,把盒子分为4等份,4等份都是边框

实现效果

1.必须是块元素,设置边框


<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <style>
        .square{
      
            width: 150px;
            height: 150px;
            border-top: 60px solid yellow;
            border-right: 60px solid yellowgreen;
            border-left: 60px solid pink;
            border-bottom: 60px solid purple;
        }
    style>
head>
<body>
    <div class="square">div>  
body>
html>

用三角形创建一个三角形原理_第1张图片

2.把宽和高都设置为0


<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <style>
        .square{
      
            width: 0px;
            height: 0px;
            border-top: 60px solid yellow;
            border-right: 60px solid yellowgreen;
            border-left: 60px solid pink;
            border-bottom: 60px solid purple;
        }
    style>
head>
<body>
    <div class="square">div>  
body>
html>

用三角形创建一个三角形原理_第2张图片

3.把border-bottom去掉


<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <style>
        .square{
      
            width: 0px;
            height: 0px;
            border-top: 60px solid yellow;
            border-right: 60px solid yellowgreen;
            border-left: 60px solid pink;
        }
    style>
head>
<body>
    <div class="square">div>  
body>
html>

用三角形创建一个三角形原理_第3张图片

把左右边框设置为透明(transparent)


<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <style>
        .square{
      
            width: 0px;
            height: 0px;
            border-top: 60px solid yellow;
            border-right: 60px solid transparent;
            border-left: 60px solid transparent;
        }
    style>
head>
<body>
    <div class="square">div>  
body>
html>

在这里插入图片描述

你可能感兴趣的:(css,html,css3)