css 倾斜元素并获得内部圆角边框顶部
css skew element and get inner rounded border top
我正在尝试使用 css 复制图形设计,但响应失败,我可以实现静态形式但存在微小缺陷(由于将两个元素放在一起)。
这是图形设计:
我更喜欢倾斜一点,例如:skew(-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, 147);
border-left: 50px solid rgb(147, 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>
我正在尝试使用 css 复制图形设计,但响应失败,我可以实现静态形式但存在微小缺陷(由于将两个元素放在一起)。
这是图形设计:
我更喜欢倾斜一点,例如:skew(-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, 147);
border-left: 50px solid rgb(147, 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>