Can I achieve this border arrow style with just one pseudo-element instead of two?

Question

GitHub uses two pseudoelements to show the green border around the triangle.

Like this:

Can I get the same result with only using one ::after selector?

@dippas Is there a better duplicate than that? The question is not well worded, and the answers all refer to external sites (jsfiddle etc) and it is not specifically about a triangle with a border. This was shaping up to be higher quality, I reckon. — Michael, Apr 27 '17 at 11:38

score 1 · Accepted Answer · edited Apr 27 '17 at 11:36

You can try this

div {
  width:300px;
  height:100px;
  background:#fff;
  border:1px solid green;
  position:relative;
  padding:20px;
 }
 
 div:after {
  content:"";
  position:absolute;
  right:-11px;
  top:30px;
  width:20px;
  height:20px;
  background:#fff;
  border:1px solid green;
  border-left:none;
  border-bottom:none;
  transform:rotate(45deg);
  -webkit-transform:rotate(45deg);
  user-select:none;
  -webkit-user-select: none;
}

<div>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim 
  veniam,quis nostrud exercitation 
</div>

I checked and it's kind of 1px too far to the left in IE11. Is Github's version more consistent maybe and that's the reason they did it that way? — Michael, Apr 27 '17 at 11:34

score 0 · Answer 2 · answered Apr 27 '17 at 11:38

You can used :after & :before selector for that

div {
  width: 300px;
  height: 200px;
  background: #fff;
  border: 1px solid #1db73f;
  position: relative;
  padding: 20px;
  border-radius:5px;
}
div:before {
  content: "";
  position: absolute;
  right: -20px;
  top: 30px;
  width: 0; 
  height: 0; 
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
  border-left: 20px solid #fff;
  z-index:1;
}
div:after {
  content: "";
  position: absolute;
  right: -21px;
  top: 30px;
  width: 0; 
  height: 0; 
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;      
  border-left: 20px solid #1db73f;
}

<div>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

Can I achieve this border arrow style with just one pseudo-element instead of two?

2 Answers2