html - 带右箭头的div

Question

我有这个 div:

我需要 css 来准确地做到这一点，div 和向右的箭头就是这样。Alos，我需要一个随机文本(长度在变化，我们正在谈论响应)，我希望文本始终位于事物的中间......最好的方法是什么？

Answer 1

这是一个很棒的生成器，可以帮助您入门，然后您可以对其进行更多自定义以获得您想要的结果

http://cssarrowplease.com/

要获得与您展示的内容类似的内容，请尝试

.arrow_box {
  position: relative;
  background: #3abc3d;
  min-height: 80px;
  border-radius: 10px;
  padding: 20px;
}
.arrow_box:after {
  left: 100%;
  top: 50%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  border-color: rgba(58, 188, 61, 0);
  border-left-color: #3abc3d;
  border-width: 20px;
  margin-top: -20px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />

<div class="col-xs-5 col-sm-4 col-md-4 col-lg-2">
  <div class="arrow_box">
    Message for everything
  </div>

</div>

然后在您的箭头框上，使用 Bootstrap 或您正在使用的任何网格系统，附加响应能力的大小。