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

我一直在试图创建一个使用div的和css一个标题栏和左侧面板，但在下面的截图，实现垂直和水平div之间的CSS曲率？

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

jsfiddle示例或指向现有示例的链接将会有所帮助。我对编程并不陌生，但对css是新的。

enter image description here

来源

2014-12-19 Nav

曲率，请尝试'边界radius'风格。该值可以介于0和90之间，值越高，曲线越陡。 – 2014-12-19 04:09:44

你能否提供你迄今为止所做的一个小提琴？ – 2014-12-19 04:20:43

你可以使用:after：伪元素为切割和应用嵌入box-shadow实现这一目标。

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

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>

来源

2014-12-19 04:23:58

听起来像一个熟悉的请求，从今天早些时候（你和我）都已经看到：P – jbutler483 2014-12-19 11:38:31

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

回答

相关问题