时间戳

首页 > 解决方案 > CSS不规则形状，结合阴影

css - CSS不规则形状，结合阴影

问题描述

我想组合两个形状和它们的阴影，以创建如下所示的 UI。

在我的尝试中，第一个元素的阴影会与第二个元素重叠。

有什么想法可以跨浏览器完成这项工作吗？

阴影重叠

HTML

<div class="mainShape">
  <div class="subShape">

  </div>
</div>

CSS

.mainShape {
  position: relative;
  box-shadow: 6px 0 21px -3px rgba(86,93,111,0.12);
  background: white;
  width: 200px;
  height: 600px;
}

.subShape {
  position: absolute;
  top: 0px;
  right: -60px;
  width: 60px;
  height: 180px;
  box-shadow: 6px 0 21px -3px rgba(86,93,111,0.12);
}

https://jsfiddle.net/mk32g7yj/7/

标签： cssflexbox

解决方案

可能有一种更优雅的方法可以做到这一点，例如 Sumurai 建议使用 svg，但实现这一点的一种相当老套的方法可能是在其他两个 div 之间粘贴一个“屏蔽”div（具有白色背景）：

.mainShape {
  position: relative;
  box-shadow: 6px 0 21px -3px rgba(86,93,111,0.12);
  background: white;
  width: 200px;
  height: 600px;
}

.subShape {
  position: absolute;
  top: 0px;
  right: -60px;
  width: 60px;
  height: 180px;
  box-shadow: 6px 0 21px -3px rgba(86,93,111,0.12);
}

.mask {
  position: absolute;
  top:0px;
  right:-20px;
  width:25px;
  height:180px;
  background-color:white;
}
<div class="mainShape">
  <div class="subShape">

  </div>
  <div class="mask">
  
  </div>
</div>

推荐阅读