cssを使用して単純に三角形を描く
1.国境の分割を見てみましょう
.demo{
width:100px;
height:100px;
border:3px red solid;
}
2.ボックスの幅が0の場合はどのようになりますか
.demo{
width:0;
height:0;
border: 40px solid;
border-color: red blue red blue;
}
3.透明を使用して、さまざまな三角形を持つように透明度を設定します
<style>
.main {
display: flex;
}
.one {
width: 0;
height: 0;
border: 10px solid transparent;
border-left-color: red;
}
.two {
width: 0;
height: 0;
border: 10px solid transparent;
border-right-color: red;
}
.three {
width: 0;
height: 0;
border: 10px solid transparent;
border-top-color: red;
}
.four {
width: 0;
height: 0;
border: 10px solid transparent;
border-bottom-color: red;
}
</style>
</head>
<body>
<div class="main">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
<div class="four"></div>
</div>
</body>
4.直角三角形を取得するには、片側を0に設定します
.one {
width: 0;
height: 0;
border: 50px solid transparent;
border-left-color: red;
border-top: 0;
}
次に、台形を描きます
三角形を描く原理に従い、条件に応じて幅や高さを設定します
width: 200px;
height:0;
border: 50px solid transparent;
border-bottom-color: red;
3つの平行四辺形を描く
主にcss3の変換：skew（x-angle、y-angle）を使用して、X軸とY軸に沿った2Dスキュー変換を定義します。
.city {
padding: 5px 20px;
border: 1px solid #44a5fc;
color: #333;
transform: skew(-20deg);
}
<div class="city">武汉</div>
4つの鈍い三角形を描く
主にCSS3 ** transform：skew（x-angle、y-angle）を使用して、X軸とY軸に沿った2Dスキュー変換を定義します。**鈍角三角形を描く
.city {
width: 0;
height: 0;
border:30px solid transparent;
border-bottom-color:#44a5fc;
border-right-color:#44a5fc;
transform: skew(-30deg);
}
<div class="city"></div>
