css样式画半圆或三角形

1、要用CSS样式画半圆或三角形，可以使用CSS的边框、伪元素以及转换属性来实现。

       画半圆： 可以利用边框属性和圆角属性来画一个宽高相等的元素，然后使用伪元素将其一半隐藏，达到画半圆的效果。

.half-circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 1px solid black;
  overflow: hidden;
  position: relative;
}

.half-circle::before {
  content: "";
  width: 100%;
  height: 200%;
  border-radius: 50%;
  background-color: black;
  position: absolute;
  bottom: -100%;
  left: 0;
}

2、 通过圆角样式画半圆 

.semi-circle{
  width:100px;
  height:50px;
  background-color:red;
  border-radius:50px 50px 0 0; //设置外边框圆角 上半圆
}

.semi-circle2{
  width:100px;
  height:50px;
  background-color:red;
  border-radius:  0 0 50px 50px; //设置下半圆
}
.semi-circle3{
  width:100px;
  height:50px;
  background-color:red;
 border-radius: 50px  0 0  50px; //设置左半圆
}
.semi-circle4{
  width:100px;
  height:50px;
  background-color:red;
  border-radius: 0 50px  50px  0 ; //设置右半圆
}
  

3、画三角形： 可以利用边框属性，设置一个宽高为0的元素，并利用边框的透明属性来实现只显示其中几个边框的效果，从而画出一个三角形。

// 三角形（上）
.triangle {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid black;
}
// 三角形（下）
.triangle2 {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-top: 50px solid transparent;
}

// 三角形（左）
.triangle3 {
  width: 0;
  height: 0;
  border-top: 50px solid transparent;
  border-bottom: 50px solid transparent;
  border-right: 100px solid black;
}
// 三角形（右）
.triangle4 {
  width: 0;
  height: 0;
  border-top: 50px solid transparent;
  border-bottom: 50px solid transparent;
  border-left: 100px solid black;
}

   通常还可以只通过right 和 top 、 right 和 bottom 、top 和 left 、bottom 和 left 两边也可以画三角形