如何使用:after创建“阻塞的尾”？

Question

对不起，我不太确定这些会叫什么。我有一个模块，当悬停时，显示另一个带有信息的框。我希望这些与一个有角的矩形(或尾巴)连接，以表明它们是一起的。

与此类似：

​

我最初试着用一个旋转的矩形和一个:after元素来完成它，但是这对于响应不太好，我想知道你们是怎么想的。

我建立的名单是这样的：

<div class="pp-left">
<ul>
<li class="targ">Target</li>
<li class="conn">Connect</li>
<li class="conv">Convert</li>
<li class="opti">Optimize</li>
</ul>
</div>

后面跟着带有各自CSS类的“弹出窗口”：

<div class="pp-right">
   <div class="target-popup popup" style="display: none;">
      <p>Build data-rich supporter profiles, segmenting them, and targeting them with one-to-one communications. Create custom groups to segment constituents by activities, interests, giving level, location, etc and set list segmentation conditions that auto-populate and refresh groups daily.</p>
   </div>
</div>

我用这种功能来处理悬停/显示/隐藏：

$(function() {
    $('.target-popup').show();
    $('.targ, .target-popup').hover(function() {
            $('.target-popup').show();
        },
        function() {
            $('.target-popup').hide();
        });
});

这是我可行的小提琴。

Answer 1

正如您所说的，一个伪元素和一个transform...in --这个例子是skewY和对transform-origin的调整。

​

div {
  width: 150px;
  height: 75px;
  background: orange;
  margin: 1em auto;
  position: relative;
}
div::after {
  content: '';
  position: absolute;
  left: 100%;
  top: 0;
  height: 100%;
  width: 15%;
  background: darkred;
  transform-origin: left top;
  transform: skewY(25deg)
}

<div></div>

​

Answer 2

感谢Paulie_D，我修改了HTML/CSS，并包含了一个带有类“指示符”的div。这是各自的代码

div.indicator {
   background: orange none repeat scroll 0 0;
   float: left;
   position: relative;
 }

 div.indicator::after {
   background: darkred none repeat scroll 0 0;
   content: "";
   height: 42px;
   left: 150px;
   position: absolute;
   top: -10px;
   transform: skewY(25deg);
   transform-origin: left top 0;
   width: 15px;
 }

您可以在https://jsfiddle.net/q0qzLh74/中看到演示

我没有修改jQuery。每个李都有一个带有类“指示符”的div。因此，需要更改jQuery以相应地显示/隐藏。