[分享]css两个半圆一个矩形

在前端开发中，经常需要使用CSS来实现复杂的图形效果。一种比较有趣的实现方式是通过CSS画出两个半圆和一个矩形。下面是实现代码： .container { width: 200px; height: ...

在前端开发中，经常需要使用CSS来实现复杂的图形效果。一种比较有趣的实现方式是通过CSS画出两个半圆和一个矩形。下面是实现代码：

<style>
  .container {
    width: 200px;
    height: 100px;
    position: relative;
    border: 1px solid #ccc;
    border-radius: 5px;
    overflow: hidden;
  }
  .half-circle {
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    height: 100%;
    background-color: #f00;
    border-radius: 50% 0 0 50%;
    transform-origin: right;
    transform: rotate(180deg);
  }
  .half-circle.right {
    left: 50%;
    border-radius: 0 50% 50% 0;
    transform-origin: left;
  }
  .rectangle {
    position: absolute;
    top: 0;
    left: 50%;
    width: 50%;
    height: 100%;
    background-color: #00f;
    transform: translateX(-50%);
  }
</style>
<div class="container">
  <div class="half-circle"></div>
  <div class="half-circle right"></div>
  <div class="rectangle"></div>
</div> 

上述代码中，我们首先定义了包含半圆和矩形的容器，指定其宽度和高度，并设置了边框、圆角和溢出隐藏。接着分别定义了两个半圆和一个矩形的样式，其中半圆样式使用了绝对定位和旋转变换，而矩形样式使用了绝对定位和平移变换。

在HTML结构中，我们将半圆和矩形分别放置在容器内，并为右侧的半圆添加了一个类名，使其在CSS中能够不同于左侧的半圆进行样式定义。

通过上述实现方式，我们可以很方便地画出两个半圆和一个矩形，从而实现各种有趣的效果。因为使用了CSS的基础属性和变换效果，所以该实现方式也非常灵活，可以根据需要进行进一步的修改和优化。