CSS偏斜元素并获得内部圆形边框顶部 [英] css skew element and get inner rounded border top

问题描述

我正在尝试使用css复制图形设计，但是我的响应方式失败了，我可以实现静态形式，但有微小的缺陷(由于将两个元素放在一起).

I'm trying to replicate a graphical design using css, but I have failed for responsive, I can achieve an static form but with tiny defects (due to putting together two elements).

这是图形设计:

我希望它更倾斜一些，例如:skew(-40deg).但想法是要有一个内部圆形边框，像在图像中一样包裹该按键.

I prefer it a bit more tilted, like: skew(-40deg). But the idea is to have an inner rounded border that wraps that key-button just like in the image.

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/

是否有一种更清洁的方式来做到这一点?像不必使用两个元素?一个元素可以很容易地使其具有响应性.

Is there a cleaner way to do this? Like not having to use two elements? With one element it would be easy to make it responsive.

推荐答案

我会这样:

.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偏斜元素并获得内部圆形边框顶部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！