實現垂直和水平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曲率？

回答

相關問題