How do I create this in CSS, or what is a name like this for me to search?

Question

I need to create this on my client's website, but I can't format any CSS or find something similar on the internet, could you help me? The picture looks like this:

What have you tried so far? Can you show us some code? How do you wish to accomplish this? Please read the [tour](https://stackoverflow.com/tour). — Rojo, Oct 17 '19 at 02:30
if you want to make it css. the green background is just a box with a padding. and has transform in right side with border orange. — Vincent Dante, Oct 17 '19 at 02:31

Miroslav Glamuzina · Answer 1 · 2019-10-17T02:50:49.947

2

This could be either done in CSS or by creating an image. If you are looking to do this in CSS (and there's no problem with that) you are looking for linear-gradient.

body {
  background-color: #C8E2FA;
}

#banner {
  text-shadow: 0.8px 0.8px #AAAAAAAA;
  font-weight: bolder;
  padding: 4px 8px;
  width: 100%;
  color: #FFFFFF;
  background: linear-gradient( 135deg, #0B6566 60%, #FF7149 61%, transparent 19%)
}

<div id="banner">DIVERSOS CURSOS GRATUITOS</div>

Hope this helps,

edited Oct 17 '19 at 02:50

answered Oct 17 '19 at 02:40

Miroslav Glamuzina

4,472
2
19
33

1

Also `text-shadow` for the text. – etoxin Oct 17 '19 at 02:45

score 1 · Accepted Answer · answered Oct 17 '19 at 02:46

May be something like this using clip-path

.wrapper {
  clip-path: polygon(0 0, 100% 0%, 95% 100%, 0% 100%);
  position: relative;
}

.content {
  background: #0d6568;
  color: #fff;
  padding: 1em;
  z-index: 1;
  position: relative;
  width: 90%;
  clip-path: polygon(0 0, 100% 0%, 95% 100%, 0% 100%);
  text-shadow: 2px 2px #000;
}

.wrapper:after {
  content: '';
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  background: #cf895c;
}

<div class="wrapper">
  <div class="content">
    CONTENT
  </div>
</div>

Just be aware support for clip path is currently [far from universal](https://caniuse.com/#feat=css-clip-path). This currently **won't** work on any Microsoft browser. — Jon P, Oct 17 '19 at 03:12

score 1 · Answer 3 · answered Oct 17 '19 at 02:50

.ribbon {
    position: relative;
    display: inline-block;
    background-color: #0d6468;
    color: #fff;
    padding: 10px 60px 10px 12px;
    background: linear-gradient(-45deg, transparent 30px, #ce895c 40px, #0d6468 10px) 100% no-repeat;
  }

<div class="ribbon">DIVERSOS CURSOS GRATUITOS</div>

See this

How do I create this in CSS, or what is a name like this for me to search?

3 Answers3