我正在尝试使用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/
有更清洁的方法吗?喜欢不必使用两个元素?使用一个元素可以很容易地使其响应.
解决方法@H_301_22@
我会这样做:
- .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>
- .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>