How to create this in css?

Question

I'd like to create this kind of design in CSS (or bootstrap functionnality maybe) so if you know a tutorial or something I need it.

Style I'd like to create:

Thanks

Hey Vincent, please check out [ask] - your question doesn't really go by the "rules", as you are simply asking us to provide code or external resources. If you make a start, and then run into a specific thing you can't get to work, you could show us your effort and ask about the specific issue. That would work. — domsson, Jun 27 '17 at 09:00
And to give you a pointer regarding your task anyway: all you need can be found on the Internet. Check [this](https://css-tricks.com/snippets/css/css-triangle/) for example. — domsson, Jun 27 '17 at 09:01
You have exactly your answer in this post : https://stackoverflow.com/questions/23428286/create-border-arrow-with-css — Jérémie Boulay, Jun 27 '17 at 09:02

score 1 · Accepted Answer · answered Jun 27 '17 at 09:06

You can get this label tag easely, using some css tricks (after + positioning):

HTML:

<span class="label-tag">Type</span>

CSS:

.label-tag {
   display:inline-block;
   position: relative;
   height: 20px;
   line-height: 20px;
   padding: 10px 20px;
   color: white;
   background-color: #509e2f;
}

.label-tag:after {
  content: '';
  position: absolute;
  left: 100%;
  top: 0px;
  border-width: 20px 0px 20px 20px;
  border-style: solid;
  border-color: transparent transparent transparent #509e2f;
}

Working fiddle: https://jsfiddle.net/bd45gynk/

How to create this in css?

1 Answers1