那些遇到过的问题

小编Exi*_*ito的帖子

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

我目前发现自己需要做这样的事情。

在此输入图像描述

我的第一个想法是使用 Clip-Path，但圆角很难实现，而且当按钮因其内容而改变宽度时，很难保持 22.5 度。

因此，我最终将每个按钮制作为两个div，其中一个 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; …
Run Code Online (Sandbox Code Playgroud)

html css frontend

Exi*_*ito
2023 05-13
18
推荐指数
3
解决办法
2405
查看次数

标签 统计

css ×1

frontend ×1

html ×1