在 CSS 中生成一个带有粗直右箭头的矩形框

Question

我正在尝试生成一个连接到重箭头（朝右）的矩形，如下所示：

(Link to image for those using SO dark theme)

我尝试过将形状分成几部分。我尝试先绘制矩形（并将其放置在与箭头支架相同的 class 中），然后绘制箭头的底部。最后，头部使用旋转和透明度。在我当前版本的 CSS 代码中，似乎无法将箭头移动到矩形之外以类似于上图中所示的那个。我一直在尝试通过调整参数并尝试不同的 CSS 属性来实现这一点。请提出解决方案和方法。

body {
  height: 100%;
  width: 100%;
  background-color: black;
  overflow: hidden;
}


/* Arrow holder */
.arrowed {
  position: relative;
  height: 200px;
  width: 200px;
  margin: 0 20px 20px 0;
  border: 1px solid rgba(0, 0, 0, 0.25);
}

.arrowed div {
  float: right;
  top: 0;
  bottom: 0;
  left: 18;
  right: 0;
  margin: auto;
}

.arrow-5 {
  /* more triangle */
  position: relative;
  height: 22px;
  width: 35px;
  border: 30px solid;
  border-color: white white transparent transparent;
  transform: rotate(45deg);
}

.arrow-5:before {
  content: '';
  position: absolute;
  top: 0px;
  right: 0px;
  display: block;
  height: 54px;
  width: 58px;
  background-color: white;
  transform: rotate(-45deg) translate(10px, 1px);
}

.rectangle {
  width: 200px;
  height: 100px;
  background: blue;
}

<div class="arrowed rectangle">
  <div class="arrow-5"></div>
</div>

Answer 1

您可以使用伪元素在右侧绘制带箭头的方块。

在这个例子中，我使用 CSS 变量来轻松控制大小和间隙。如果由于某种原因无法使用，您可以手动替换它并像生成器一样使用此代码段。

如果需要，此方法还支持阴影。

/* root variables */
:root {
  --space: 1rem;
  --bg-color: #47baffb3;
}

/* main block bg color and part between of block and arrow */
.arrow-block,
.arrow-block:before {
  background-color: var(--bg-color);
}

/* arrow block (text container) */
.arrow-block {
  position: relative;
  padding: var(--space);
  margin-right: calc(var(--space) * 3);
  filter: drop-shadow(0 0 .5rem rgba(0, 0, 0, .6));
}

/* arrow parts */
.arrow-block:before,
.arrow-block:after {
  content: '';
  position: absolute;
  top: 50%;
  transform: translate3d(0, -50%, 0);
}

/* part between block and arrow */
.arrow-block:before {
  height: calc(var(--space) * 2);
  width: var(--space);
  right: calc(var(--space) * -1);
}

/* arrow itself */
.arrow-block:after {
  --arrow-side-size: calc(var(--space) * 2);
  
  border-bottom: var(--arrow-side-size) solid transparent;
  border-top: var(--arrow-side-size) solid transparent;
  border-left: var(--arrow-side-size) solid var(--bg-color);
  right: calc(var(--space) * -3);
}

<div class="arrow-block">
  <p>Block with arrow</p>
  <p>Block with arrow second line</p>
</div>

在 CSS 中生成一个带有粗直右箭头的矩形框

Produce a rectangle shaped box with a heavy straight right arrow in CSS

css

css-shapes