【css】基础布局——形状

 矩形（正方形）

div {
  width: 100px;
  height: 100px;
  background: #ff5530;
  margin: auto 0; 
}

圆形

圆形 border-radius将四个角全部等于半径

div {
  width: 100px;
  height: 100px;
  background: #aacc22;
  border-radius: 50px;
  margin: auto 0; 
}

 

半圆

div {
  width: 100px;
  height: 50px;
  background: #aacc22;
  border-radius: 50px 50px 0 0;
  margin: auto 0;
}

 三角

三角形写的是高和与高分割的两个底边 

.triangle {
  width: 0;
  height: 0;
  border-bottom: 100px solid #ff5530;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  margin: auto 0;
}