html - 如何在 div 上实现向下箭头？

Question

我需要创建这样的价格标记: .有时，价格会附有 Open 和收藏夹(爱心)，有时则不会。

我已经设法创建了其中的大部分内容(请参阅片段)。我使用 ::before 伪类来呈现收藏夹部分。我使用 ::after 来处理 Open 部分。

拼图的最后一 block 是向下的箭头。由于 ::before 和 ::after 只能使用一次，所以我不会使用这些类型的技巧。

那么如何实现向下箭头呢？附言请注意，价格周围有一个边框，它也应该包围箭头。

    body {
      background-color: lightsalmon;
      transform: scale(4.0);
      transform-origin: 0 0;
    }

    .home-price {
      color: white;
      border-width: 1px;
      border-style: solid;
      width: 50px;
      text-align: center;
      border-radius: 2px;
      font-family: Helvetica, Arial;
      font-size: 14px;
      font-weight: 300;
      display: inline-block;
      position: relative;
    }

    .home-sale {
      background-color: #009934;
      border-color: #F2F5F3;
    }

    .home-hot {
      background-color: #C81845;
      border-color: #F5F2F3;
    }

    .home-foreclosed {
      background-color: #FBA902;
      border-color: #F6F5F2;
    }

    /* Open House Marker */
    .home-price::after {
      border-width: 1px;
      border-style: solid;
      border-color: white;
      border-radius: 2px;
      border-spacing: 1px;
      content: "OPEN";
      color: white;
      background-color: #586371;
      font-family: Helvetica, Arial;
      font-size: 8px;
      font-weight: 300;
      display: block;
      position: absolute;
      top: -10px;
      left: -1px;
      text-align: center;
      width: 25px;
    }

    /* Favorite Marker */
    .home-price::before {
      content: "♥";
      color: red;
      display: block;
      position: absolute;
      left: 46px;     
      top: -8px;
      text-shadow:  white 0px 0px 1px,   
                    white 0px 0px 1px,   
                    white 0px 0px 1px,
                    white 0px 0px 1px,   
                    white 0px 0px 1px,   
                    white 0px 0px 1px;

    }

  <div style="height: 200px;margin-top: 30px;">
    <div class="home-price home-hot">$899K</div>
    <div class="home-price home-sale">$1.29M</div>
    <div class="home-price home-foreclosed">$11.8M</div>
  </div>

Answer 1

我相信 Juanin 的意思是将“Open”和“Heart”内容移动到元素中。这反过来将释放向下箭头的伪前后。

这是一个粗略的 fiddle 来说明他的意思。

https://jsfiddle.net/wd0um6q9/2/

和 HTML 标记:

  <div style="height: 200px;margin-top: 30px;">
    <div class="home-price home-hot"><i class="open">Open</i><i class="heart"></i>$899K</div>
  </div>

还有 CSS:

/* Open House Marker */
    .open {
      border-width: 1px;
      border-style: solid;
      border-color: white;
      border-radius: 2px;
      border-spacing: 1px;
      color: white;
      background-color: #586371;
      font-family: Helvetica, Arial;
      font-size: 8px;
      font-weight: 300;
      display: block;
      position: absolute;
      top: -10px;
      left: -1px;
      text-align: center;
      width: 25px;
    }

    /* Favorite Marker */
    .heart:before {
      content: "♥";
      color: red;
      display: block;
      position: absolute;
      left: 46px;     
      top: -8px;
      text-shadow:  white 0px 0px 1px,   
                    white 0px 0px 1px,   
                    white 0px 0px 1px,
                    white 0px 0px 1px,   
                    white 0px 0px 1px,   
                    white 0px 0px 1px;

    }