我一直在尝试使用div
和css
创建标题栏和左侧面板,但如下面的屏幕截图所示,
css
创建曲率,类似于红色
我用paintbrush
绘制的曲率?GIMP
中,并使用整个垂直和水平的图像
面板(在GIMP
中很难设计)? jsfiddle示例或指向现有示例的链接最有帮助。我不是编程新手,但我是css
新手。
答案 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>