设置框阴影的宽度并使其成为角 - CSS

Question

我正在制作这样的模块：

问题是我无法设置 box-shadow inset 的宽度并按照所附图片将其转角。

这是我试过的（示例一）

HTML

你好世界

CSS

div {
    height: 100px;
    background-color: #000000;
    width: 100px;
    box-shadow: inset -1px 10px 5px -3px #F8E2AA;
}
    
div p {
  padding-top: 20px;
  color: #fff;
}

JSFiddle：https://jsfiddle.net/deepesh316/kLcg5tu9/13/ 任何帮助将不胜感激。

Answer 1

创建所需效果的一种相当直接的方法是将伪元素放置到 div。

与 box-shadow 之类的东西相比，这可以让您更好地控制样式。在此代码段中，after 伪元素的背景色为石灰色，长度为 70%（其拥有的 div 的宽度）和几个像素的高度。当然这些可以根据需要进行调整。

圆端（角）是通过给伪元素一个边界半径来实现的。

div {
    height: 100px;
  background-color: #000000;
  width: 100px;
  position: relative;
}
div:after {
  width: 70%;
  height: 2%;
  background: lime;
  border-radius: 25%;
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index:2;
}

div p {
  padding-top: 20px;
  color: #ffffff;
}

<div>
<p>Hello World</p>
</div>

设置框阴影的宽度并使其成为角 - CSS

Set Width for box-shadow and make it corner - CSS

html

css

css-transitions