在div的右侧加点

Question

我试图在相对（没有定义的宽度）div的右侧放置一个点。

HTML（使用Wordpress和Bootstrap）

<div class="col-md-9 col-md-offset-1">
        <h2 class="sml-title"><?php the_category(' - '); ?></h2> 

...

CSS

.sml-title {
display: inline-block;
padding: 15px;
color: #fff;
background-color: #4ad2dc;
}

.sml-title:after {
right: 0px;
top: 0px;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: rgba(136, 183, 213, 0);
border-left-color: #88b7d5;
border-width: 30px;
margin-top: -30px;
}

我遇到的问题是箭头一直到屏幕的右侧。我想让它在sml-title之后立刻进行。但我无法在sml-title上设置宽度，因为我无法控制内容。

尝试完成此任务

Answer 1

您可以通过以下两种方式之一实现形状 -

.arrow {
   border-right: 33px solid transparent;
  height: 0;
  width: 130px;
  border-bottom: 34px solid black;
 
}
.invert {
  -moz-transform: rotateX(180deg);
  -webkit-transform: rotateX(180deg);
  transform: transform: rotateX(180deg);
  ;
}
#base {
    background: red;
  display: inline-block;
  height: 134px;
  margin-left: 33px;
  /* margin-top: 51px; */
  position: relative;
  width: 70px;
  transform: rotate(90deg);
}


#base:before {
  border-bottom: 35px solid red;
  border-left: 36px solid transparent;
  border-right: 34px solid transparent;
  content: "";
  height: 0;
  left: 0;
  position: absolute;
  top: -35px;
  width: 0;
  }

<div class="arrow"></div>
<div class="arrow invert"></div>
<div id="base"></div>

Answer 2

如果您使用position: absolute，则会将元素定位在最近的父级position: relative或absolute内。在您的情况下，.sml-title没有这些属性，因此.sml-title:after未位于.sml-title内。

如果您希望将::after伪元素放置在.sml-title内，则需要将position: relative或absolute添加到.sml-title

Answer 3

h2{
background: #000;
color: #fff;
float: left;
font-family: Arial, sans-serif;
overflow: hidden;
padding: 20px 50px 20px 20px;
position: relative;
text-align: center;

   min-width: 200px;
}
h2:before, h2:after {
content: '';
display: block;
width: 0; 
height: 0; 
border-top: 30px solid transparent;
border-bottom: 30px solid transparent;
border-left: 30px solid #fff;
position: absolute;
right: -10px;
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
}
h2:before {
top: -20px;
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
}
h2:after {
bottom: -20px;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
}

<h2 class="sml-title">TITLE</h2>