在CSS中生成一个矩形框，其中有一个重的直的右箭头。

Question

我试图生成一个矩形，连接到重箭头(右面)，如下所示：

​

​

(链接到那些使用如此黑暗主题的人的图像)

我试着把这个形状分成几个部分。我尝试先绘制矩形(并将其放置在与箭头持有者相同的类中)，然后绘制箭头的底部。最后，头部通过旋转和透明。在我当前版本的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>

​