Skip to content

创建三角形.md

Latest commit

 

History

History
119 lines (111 loc) · 2.63 KB

创建三角形.md

File metadata and controls

119 lines (111 loc) · 2.63 KB

纯css创建三角形

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="Cache-Control" content="no-cache">
    <title>test my Javascript</title>
    <style>
       #div1 {
           width: 100px;
           height: 100px;

           border-style: solid;
           border-width: 10px;
           border-color: black;
       }
    </style>
</head>
<body>
    <div id="div1"></div>
</body>
<script>
</script>
</html>

  • 改变边框的宽度
<style>
       #div1 {
           width: 100px;
           height: 100px;

           border-style: solid;
           border-width: 10px 100px 150px 100px;
           border-color: black;
       }
    </style>

  • 注意我将width设置为0的变化 整体的高度没变 也就是content里面就只有一条竖线而已
    <style>
       #div1 {
           width: 0px;
           height: 100px;

           border-style: solid;
           border-width: 10px 100px 150px 100px;
           border-color: black;
       }
    </style>

  • 设置边框顶部为透明 看看是怎么剪切的
    <style>
       #div1 {
           width: 0px;
           height: 100px;

           border-style: solid;
           border-width: 10px 100px 150px 100px;
           border-color: transparent black black black;
       }
    </style>

  • 设置边框顶部 右部为透明 看看是怎么剪切的
    <style>
       #div1 {
           width: 0px;
           height: 100px;

           border-style: solid;
           border-width: 10px 100px 150px 100px;
           border-color: transparent transparent black black;
       }
    </style>

  • 设置边框顶部 右部 左部 为透明 看看是怎么剪切的
    <style>
       #div1 {
           width: 0px;
           height: 100px;

           border-style: solid;
           border-width: 10px 100px 150px 100px;
           border-color: transparent transparent black transparent;
       }
    </style>

将要裁剪的本体的宽度和高度全部设置为 0 看看发生的变化

  • 注意你可以将 height也设置为0px 此时content里面其实就是一个点了 注意画画理解