如何创建css凹/凸形状 [英] how to create css concave/convex shapes

问题描述

我想要创建两个背景白色形状的div，如下所示。你可以看到它基本上是一个矩形和一个椭圆形被切出。

I want to create two divs with the background white shape depicted below. As you can see it's basically a rectangle and a ellipse-shape being cut out. It should be able to produce a box-shadow.

只有css才能实现这一点。

Is there a way to achieve this with css only?

推荐答案

shadow 我已添加 border 以了解

I have used 2 div's with box-shadow i have added border for understanding

body {
  background:url(https://placeimg.com/640/480/any);
}

.out {
  width: 455px;
  height: 275px;
  border: 1px solid red;
  position: relative;
  overflow: hidden;
  margin: 20px;
}

.in {
  width: 550px;
  height: 550px;
  border: 1px solid green;
  position: absolute;
  left: 200px;
  border-radius: 50%;
  box-shadow: 0 0 0 500px white; /* this is the white background */
}

.bottom .in {
  bottom: 0;
  left: 200px;
}

<div class="out">
  <div class="in">

  </div>
</div>

<div class="out bottom">
  <div class="in">

  </div>
</div>

这篇关于如何创建css凹/凸形状的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！