如何通过CSS创建一个一边有角度、一边有圆角的盒子？

提问者：小点点

如何通过CSS创建一个一边有角度、一边有圆角的盒子？

所以我现在发现自己需要做这样的东西。

我的第一个想法是使用剪辑路径，但是圆角很难拉下来，当按钮因其内容而改变宽度时，很难保持22.5度。

所以我最终将每个按钮设为2个div，1个div倾斜22.5度，并被常规矩形div重叠。然后我为两者添加了边框半径。

body {
  line-height: 0;
  font-size: 16px;
  background-color: black;
}

.cta-button-group {
  display: flex;
  gap: 2rem;
  align-items: center;
}

.button-angular-wrapper-left {
  display: flex;
  isolation: isolate;
  position: relative;
  height: 40px;
  width: fit-content;
}

.button-angular-wrapper-left .button-angular-main {
  border-radius: 7px 0 0 7px;
  height: 100%;
  display: inline-grid;
  place-items: center;
  padding-inline: 8px 16px;
  margin-right: 13px;
  transition: background-color 50ms;
}

.button-angular-wrapper-left .button-angular-slant {
  border-radius: 0 7px 7px 0;
  height: 100%;
  width: 24px;
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: -1;
  transition: background-color 50ms;
}

.button-angular-wrapper-left .button-angular-slant.back-slash {
  transform: skewX(22.5deg);
}

.button-angular-wrapper-left .button-angular-slant.forward-slash {
  transform: skewX(-22.5deg);
}

.button-angular-wrapper-left.button-angular-color-solid-white .button-angular-main,
.button-angular-wrapper-left.button-angular-color-solid-white .button-angular-slant {
  background: white;
  border: 3px solid white;
  color: blue;
}

.button-angular-wrapper-left.button-angular-color-solid-white .button-angular-main {
  border-right: none;
}

.button-angular-wrapper-left.button-angular-color-solid-white .button-angular-slant {
  border-left: none;
}

.button-angular-wrapper-right {
  display: flex;
  isolation: isolate;
  position: relative;
  height: 40px;
  width: fit-content;
}

.button-angular-wrapper-right .button-angular-main {
  border-radius: 0 7px 7px 0;
  height: 100%;
  display: inline-grid;
  place-items: center;
  padding-inline: 8px 16px;
  margin-left: 13px;
}

.button-angular-wrapper-right .button-angular-slant {
  border-radius: 7px 0 0 7px;
  height: 100%;
  width: 24px;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  z-index: -1;
}

.button-angular-wrapper-right .button-angular-slant.back-slash {
  transform: skewX(22.5deg);
}

.button-angular-wrapper-right .button-angular-slant.forward-slash {
  transform: skewX(-22.5deg);
}

.button-angular-wrapper-right.button-angular-color-outline-white .button-angular-main,
.button-angular-wrapper-right.button-angular-color-outline-white .button-angular-slant {
  border: 3px solid white;
}

.button-angular-wrapper-right.button-angular-color-outline-white .button-angular-main {
  border-left: none;
}

.button-angular-wrapper-right.button-angular-color-outline-white .button-angular-main .icon-call {
  color: white;
}

.button-angular-wrapper-right.button-angular-color-outline-white .button-angular-main .cta-text {
  color: white;
}

.button-angular-wrapper-right.button-angular-color-outline-white .button-angular-slant {
  border-right: none;
}

<div class="cta-button-group">
  <div class="button-angular-wrapper-left button-angular-color-solid-white" href="">
    <div class="button-angular-main">
      <span class="cta-text">
        Learn More Today
      </span>
    </div>
    <div class="button-angular-slant back-slash">
    </div>
  </div>
  <div class="button-angular-wrapper-right button-angular-color-outline-white" href="">
    <div class="button-angular-main">
      <span class="cta-text tel-link-no">
        1800-1-5555
      </span>
    </div>
    <div class="button-angular-slant back-slash">
    </div>
  </div>
</div>

https://codepen.io/katylar/pen/yLRjKaO

它可以工作，但并不完美。我注意到在某些分辨率下，某些浏览器上有明显的工件和奇怪的角/边。

有人有好的解决方案吗？这不涉及面具（就尺寸而言，我总是很难使用面具）？

共2个答案

匿名用户

如果你完全反对遮罩，一个建议是使用透视并在3D旋转一个div来给出一个有角度的元素。

使用容器并使其成为show： inline-block，这样角度的div总是在右侧。这使得它，当您在X轴上旋转它时，向右“向后”倾斜。我们在容器中创建一个新的堆叠上下文以隐藏父级下面的最后一个div。使用css自定义属性来确保最终的div与父级的宽度相匹配。就我个人而言，我会使用掩码，但这可以代替，当然是对于具有坚实背景的元素。我不知道你会如何处理边框，因为边框宽度也会随着的变换而改变：rotateX（）属性。对于不同的高度和宽度来说，它也有点脆弱，但它可能是一个有用的起点。

不管怎样，看看你怎么想。

body {
  background: black;
  color: black;
}

.container {
  --height: 4rem;
  perspective: 100px;
  isolation: isolate;
  display: inline-flex;
}

.main,
.angle {
  display: inline-flex;
  align-items: center;
  padding-left: 1rem;
  background-color: white;
  border-radius: 0.5rem;
}

.main {
  height: var(--height);
  width: 200px;
}

.angle {
  position: relative;
  right: 30px;
  width: 30px;
  transform-origin: top center;
  transform: rotateX(20deg);
  height: calc(var(--height) * 0.96);
  z-index: -1;
}

<div class="container">
  <div class='main'>Learn more today!</div><div class="angle"></div>
</div>

匿名用户

我用伪元素尝试过这种方法。这个形状的左侧是一个::before元素，为了悬停效果，我将按钮和伪元素的特定侧面变为不可见，并且还更改了特定角落的边框raduis。

.button {
  color: white;
  background-color: black;
  text-align: center;
  text-transform: uppercase;
  padding: 5px 10px;
  margin: 10px;
  display: inline-block;
  border-radius: 4px;
  border: 2px solid black;
  -ms-transform: skewX(-20deg);
  -webkit-transform: skewX(-20deg);
  transform: skewX(-20deg);
}

.button-left::before {
  content: " ";
  display: block;
  position: absolute;
  top: -2px;
  left: -7px;
  z-index: -10;
  background-color: black;
  width: 20px;
  height: 100%;
  -ms-transform: skewX(20deg);
  -webkit-transform: skewX(20deg);
  transform: skewX(20deg);
  border-radius: 4px;
  border: 2px solid black;
}

.button-left:hover {
  background: rgba(0,0,0,0);
  box-sizing: border-box;
  border: 2px solid black;
  border-left: 2px solid rgba(0,0,0,0);
  color: black;
  border-top-left-radius: 0;
}

.button-left:hover::before {
  border-right: 2px solid rgba(0,0,0,0);
  background: rgba(0,0,0,0);
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.button-content {
  -ms-transform: skewX(20deg);
  -webkit-transform: skewX(20deg);
  transform: skewX(20deg);  
  display: inline-block;
}

<div class="button button-left">
  <span class="button-content">Slanted Button</span>
</div>