我正在尝试使用css复制图形设计,但我没有响应,我可以实现静态形式但有微小缺陷(由于将两个元素组合在一起).
这是图形设计：
我更倾向于倾斜,例如：倾斜(-40deg).但这个想法是有一个内部的圆形边框,就像在图像中一样包裹着那个按键.
html很简单：
<header> <nav></nav> </header>
css：
body > header > nav {
display: flex;
align-items: flex-end;
justify-content: center;
width: 100vw;
height: 90px;
padding: 10px 0;
text-align: center;
z-index: 1
}
body > header > nav::before {
content: '';
position: absolute;
top: 0; left: 0;
width: 80vw; height: 100%;
background-color: rgb(147,147,147);
border-bottom-right-radius: 15px;
transform: skew(-40deg);
transform-origin: 100% 0%;
}
body > header > nav::after {
content: '';
position: absolute;
top: 0; right: 0;
width: 28.7%;
border-top: 7px solid rgb(147,147);
border-left: 50px solid rgb(147,147);
height: 75px;
border-top-left-radius: 75px;
transform: skew(-33deg);
}
我准备了https://jsfiddle.net/uj4qsf37/
有更清洁的方法吗？喜欢不必使用两个元素？使用一个元素可以很容易地使其响应.
解决方法
我会这样做：
.header {
border-top: 20px solid blue;
height:100px;
position: relative;
overflow: hidden;
}
.header:before,.header:after {
content: "";
vertical-align:top;
display: inline-block;
transform-origin: top right;
transform: skew(-40deg);
}
.header:before {
height: 100%;
width: 50%;
border-radius: 0 0 20px 0;
background: blue;
}
.header:after {
height: 20px;
width: 20px;
margin-left:-1px;
background: radial-gradient(circle at bottom right,transparent 68%,blue 73%);
}
/*to illustrate different values of skew*/
.header:before,.header:after {
animation:change 2s linear infinite alternate;
}
@keyframes change{
from{transform: skew(0deg);}
top{transform: skew(-40deg);}
}
<div class="header"></div>
