1

I would like to create a flag look (snippet), so the blue triangle looks like cut out.

The snippet only presents an idea, which does not work exactly like I wanted.

.box {

  position: absolute;
  top: 0;
  right: 0;
  background-color: #ca0000;
  display: inline-block;
  color: #fff;
  font-size: 20px;
  padding-left: 80px;
  padding-right: 10px;
  height: 50px;
  line-height: 45px;

}

.box:after {

  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 0;
  border-left: 25px solid blue;
  border-top: 25px solid transparent;
  border-bottom: 25px solid transparent;
  z-index: 1;

}
<div class="box">
hehe
</div>
mr.work
  • 173
  • 10
  • A minor point: `::before` and `::after` are `pseudo-elements` (not `pseudo-classes`) and, as such, are prefixed by two colons (`::`) rather than one. – Rounin Oct 08 '19 at 10:01
  • Can you explain in more detail the effect you would like to achieve and how it differs from what you have already successfully achieved. Thanks. – Rounin Oct 08 '19 at 10:02
  • @Rounin I would like for the blue triangle to be transparent, cutting the red shape. – mr.work Oct 08 '19 at 10:05
  • 1
    @Rounin what you call *killing* is closing a question as duplicate because the question already have an answer somewhere and this is a feature of SO. As a 5 years member you should know this feature and that we don't want to have 100 similar answers on the site. If you think the duplicate is not suitable and doesn't solve the issue you can vote to reopen the question. Reopening a question is also a feature on SO. there is no *eagerness* like you said. – Temani Afif Oct 08 '19 at 10:21
  • Thanks. I value your response. Comment upvoted. No, I have never understood why it is wrong to have 100 similar questions / answers on the site. I should not care if there were over a million similar questions / answers on the site. My perspective is that everyone who asks a question is trying to learn, there's no such thing as a stupid question and every individual question deserves its own individual answers. We are, after all, humans, not computers. – Rounin Oct 08 '19 at 10:24
  • @Rounin *I have never understood why it is wrong to have 100 similar questions / answers on the site.* --> when Apple decided to build phones they made only **one** they called iPhone and focused on it to make it the *best* phone unlike other brand like Nokia where you never know which phone is the best and your are lost in all the different types and feature. Same thing here, we need to build a high quality repository of Q&A where we need high quality canonical and unique answers so that people can find them easily and won't be lost on pseudo-bad-one-line answers – Temani Afif Oct 08 '19 at 10:32
  • @Rounin we don't want to build a forum where we answer all the questions. We want to build a Q&A site where we highlight the most common answers to the most common question and you need to do the effort to understand such answers and find a solution to your particular question. – Temani Afif Oct 08 '19 at 10:35

0 Answers0