Question

我在内容后通过css创建箭头样式时遇到了一些问题。请在下面找到代码。要求是在文本A ++的末尾添加箭头。例如，请点击此网址，看看我需要实现的目标。 https://images.clasohlson.com/web/images/energy/apphighest.png。你能建议如何实现这个目标吗？我们是否需要在产品标记级别之前添加任何：before和：after以达到此要求？

.product-markers {
  position: static;
  display: block;
  overflow: hidden;
  bottom: 80px;
  right: -1px;
  width: auto;
  height: auto;
  opacity: 1;
  transition: opacity 0.2s linear 0s;
}

.product-markers .product-marker {
  position: static;
  max-width: 100%;
  float: left;
  text-align: left;
  line-height: 10px;
  margin-bottom: 3px;
  padding: 0;
  border: none;
  left: 10px;
  bottom: 10px;
  height: auto;
  margin: 0;
  font-family: "HM Ampersand Bold", Arial, sans-serif;
  letter-spacing: 0px;
  -webkit-font-smoothing: antialiased;
  text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
  color: #fff;
  text-transform: uppercase;
}

.product-markers .product-marker.energy {
  --border-right: 20px solid #19945f;
  font-size: 11px;
}

.product-markers .product-marker.energy .wrapper {
  background: #19945f;
}

.product-markers .product-marker .wrapper {
  padding: 4px 0 5px;
  position: relative;
  left: 1px;
}

.product-markers .product-marker.energy .wrapper .inner {
  position: static;
  display: block;
  overflow: hidden;
  padding: 10px;
  background: #19945f;
}

.product-markers .product-marker .wrapper .inner {
  position: relative;
  left: 9px;
}

<div class="product-markers">
  <div class="product-marker energy">
    <span class="wrapper">
      <span class="inner">A++</span>
    </span>
  </div>
</div>

Answer 1

以下是如何使用CSS三角形的例子（Jesse de Bruijne的想法）

$variable="
<table style='margin-bottom:30px;'>
                  <tr class='table_heads'>
                      <b><td style='border: 1px solid #d8d8d8;padding: 2px 7px 2px 7px;background: #ddd;font-weight: bold;font-size: 11px;'>S.No</td>
                      <td style='border: 1px solid #d8d8d8;padding: 2px 7px 2px 7px;background: #ddd;font-weight: bold;font-size: 11px;'>Ingredients</td>
                      <td style='border: 1px solid #d8d8d8;padding: 2px 7px 2px 7px;background: #ddd;font-weight: bold;font-size: 11px;'>Weight <small><i> - (In Grams)</i></small></td>
                      <td style='border: 1px solid #d8d8d8;padding: 2px 7px 2px 7px;background: #ddd;font-weight: bold;font-size: 11px;'>Fat</td>
                      <td style='border: 1px solid #d8d8d8;padding: 2px 7px 2px 7px;background: #ddd;font-weight: bold;font-size: 11px;'>Sweetness</td>
                      <td style='border: 1px solid #d8d8d8;padding: 2px 7px 2px 7px;background: #ddd;font-weight: bold;font-size: 11px;'>Solid 1</td>
                      <td style='border: 1px solid #d8d8d8;padding: 2px 7px 2px 7px;background: #ddd;font-weight: bold;font-size: 11px;'>Solid 2</td>
                      <td style='border: 1px solid #d8d8d8;padding: 2px 7px 2px 7px;background: #ddd;font-weight: bold;font-size: 11px;'>Anti-Freezing Power</td>
                 </tr>";
 while(somethign here too){ // here is the problem even i try to concenite 
   $variable .= "<tr class='table_headsnonw' style='font-size:12px;'>
                      <td>1</td>
                      <td>
                          3
                      </td>
                      <td>300</td>
                      <td>300</td>
                      <td>300</td>
                      <td>300</td>
                      <td>300</td>
                      <td>300</td>
                  </tr>";
 }

.product-markers {
  position: static;
  display: block;
  overflow: hidden;
  bottom: 80px;
  right: -1px;
  width: auto;
  height: auto;
  opacity: 1;
  transition: opacity 0.2s linear 0s;
}

.product-markers .product-marker {
  position: static;
  max-width: 100%;
  float: left;
  text-align: left;
  line-height: 10px;
  margin-bottom: 3px;
  padding: 0;
  border: none;
  left: 10px;
  bottom: 10px;
  height: auto;
  margin: 0;
  font-family: "HM Ampersand Bold", Arial, sans-serif;
  letter-spacing: 0px;
  -webkit-font-smoothing: antialiased;
  text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
  color: #fff;
  text-transform: uppercase;
}

.product-markers .product-marker.energy {
  --border-right: 20px solid #19945f;
  font-size: 11px;
}

.product-markers .product-marker.energy .wrapper {
  background: #19945f;
}

.product-markers .product-marker .wrapper {
  padding: 4px 0 5px;
  position: relative;
  left: 1px;
}

.product-markers .product-marker.energy .wrapper .inner {
  position: static;
  display: inline-block;
  overflow: hidden;
  padding: 10px;
  background: #19945f;
  float:left;
}

.product-markers .product-marker .wrapper .inner {
  position: relative;
  left: 9px;
}

.product-markers .product-marker .wrapper .arrow {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  border-bottom: 15px solid transparent;
  border-top: 15px solid transparent;
  border-left: 15px solid #19945f;
  float: left;
}

内容之后的CSS箭头形状

1 个答案: