[分享]css3半圆外凸锯齿

CSS3半圆外凸锯齿是一种在网页设计中常用的装饰元素，可以使网页看起来更加美观。下面我们来了解一下如何使用CSS3实现半圆外凸锯齿。/ CSS代码 / .halfcircle { width: 100...

CSS3半圆外凸锯齿是一种在网页设计中常用的装饰元素，可以使网页看起来更加美观。下面我们来了解一下如何使用CSS3实现半圆外凸锯齿。

/* CSS代码 */
.half-circle {
  width: 100px;
  height: 50px;
  background-color: #f7f7f7;
  position: relative;
  border-radius: 50px 50px 0 0;
}

.half-circle:before {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 50px 50px 50px;
  border-color: transparent transparent #f7f7f7 transparent;
  bottom: 0;
} 

首先我们创建了一个大小为100x50像素、背景颜色为#f7f7f7、边框半径为50像素的半圆元素。为了实现半圆外凸的效果，我们需要使用伪元素:before来创建一个三角形。三角形的宽度和高度均为0，且边框样式为实线，边框宽度设置为50像素。设置三角形的四个方位的边框颜色，从左到右依次为透明，透明，#f7f7f7，透明。将三角形的底部对齐到半圆的底部即可实现半圆外凸锯齿的效果。