css做其它形状 |css网页取色器

/*1. 圆形*/
.example{
width: 100px;
height: 100px;
background: #ccc;
border-radius: 50%; /*设置圆形半径，50%表示宽高相等*/
}
/*2. 三角形*/
.example{
width: 0;
height: 0;
border-top: 50px solid #ccc;
border-right: 50px solid transparent; /*设置边框颜色和样式*/
}
/*3. 梯形*/
.example{
width: 100px;
height: 0;
border-top: 50px solid #ccc;
border-right: 25px solid transparent;
border-left: 25px solid transparent;
}
/*4. 菱形*/
.example{
width: 0;
height: 0;
border: 50px solid #ccc;
border-width: 0 25px 50px 25px;
transform: rotate(45deg); /*通过旋转实现菱形*/
}
/*5. 右箭头*/
.example{
width: 0;
height: 0;
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
border-left: 20px solid #ccc;
}
/*6. 左箭头*/
.example{
width: 0;
height: 0;
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
border-right: 20px solid #ccc;
}
/*7. 上箭头*/
.example{
width: 0;
height: 0;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-bottom: 20px solid #ccc;
}
/*8. 下箭头*/
.example{
width: 0;
height: 0;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-top: 20px solid #ccc;
}

以上是几种常见的使用CSS制作其他形状的方法，可以根据实际需要选择适合自己的方式来实现。通过CSS的灵活运用，网页可以呈现出更加形式多样的效果。