在垂直和水平div之间实现CSS曲率？

Question

我一直在尝试使用div和css创建标题栏和左侧面板，但如下面的屏幕截图所示，

• 是否可以使用css创建曲率，类似于红色 我用paintbrush绘制的曲率？
• 您还会注意到之间可见的蓝色差异 黄色箭头。是否可以获得更均匀的梯度？ 我希望垂直和水平面板上有一个统一的渐变。
• 我实际想要实现的目标显示在下半部分 图片。一个统一的面板，边缘有阴影。可能吗 使用CSS创建或除了设计之外没有其他选择 它在GIMP中，并使用整个垂直和水平的图像 面板（在GIMP中很难设计）？

jsfiddle示例或指向现有示例的链接最有帮助。我不是编程新手，但我是css新手。

Answer 1

您可以对该剪辑使用:after：pseudo-element并应用插入box-shadow来实现此目的。

对于文字徽标，标题和菜单，您可以添加span并将display: inline-block应用于前两个span。

body {
  background: #C4C4FF;
}
div {
  width: 250px;
  height: 100px;
  position: relative;
  background: #8080FF;
}
div:after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 50%;
  height: 50%;
  background: #C4C4FF; /* This color must be same as background */
  border-top-left-radius: 30px;
  box-shadow: inset 6px 6px 10px -6px #666;
}
span {
  display: block;
  font-weight: bold;
  font-size: 18px;
  color: white;
  width: 125px;
  height: 50px;
  text-align: center;
  line-height: 50px;
}
div span:nth-of-type(1),
div span:nth-of-type(2) {
  display: inline-block;
}

<div>
  <span>Logo</span
  ><span>Title</span>
  <span>Menu</span>
</div>