putting a point on the right side of a div

I am trying to put a point on the right side of a relative (no defined width) div.

HTML (using WordPress and Bootstrap)

Read More
<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;
}

the problem I’m running into is that the arrow goes all the way to the right side of the screen. I want it to go right after the sml-title. But I can’t set a width on the sml-title because i don’t control the content.

Trying to accomplish this

enter image description here

Related posts

3 comments

  1. You can achieve the shape as either of the two ways-

    .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>
  2. 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> 
  3. If you use position: absolute, it will position the element within the nearest parent which is either position: relative or absolute. In your case, .sml-title has neither of those properties, so .sml-title:after is not positioned within .sml-title.

    If you want your ::after pseudoelement to be positioned within .sml-title, you’ll need to add position: relative or absolute to .sml-title

Comments are closed.