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

时间:2014-12-19 03:55:18

标签: html css css3

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

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

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

enter image description here

1 个答案:

答案 0 :(得分:3)

您可以对该剪辑使用: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>