Sideway rotate text with background - css

Question

Hello I'm trying to make something like this with css Image Link.
I've tried transform: skew(0deg, -35deg); and transform: rotate(-45deg); but the background color isn't as the image.

Answer 1

you can try this
.container{
border: 1px solid black;
margin: 40px;
height: 400px;
position: relative;
overflow: hidden;
}
.rotated{
background: maroon;
color: white;
transform: rotate(45deg);
text-align: center;
width: 100px;
position: absolute;
right: -25px;
top: 15px;
}
<div class="container">
<div class="rotated">TEXT</div>
</div>

Answer 2

You can use this css approach for this
.card {
width:300px;
height: 300px;
position: relative;
background: #ddd;
overflow: hidden;
}
.tag {
position: absolute;
top:5px;
right:-24px;
background: #990000;
padding: 5px 30px;
text-align: center;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
color: #fff;
font-size: 14px;
}
<div class="card">
<div class="tag">New</div>
</div>

Answer 3

Well, I tested this only in chrome. I hope this can serve as a starting point for you.
https://jsfiddle.net/pablodarde/af5c9x78/
.container {
display: flex;
justify-content: center;
align-items: center;
width: 380px;
height: 380px;
background: linear-gradient(#D4EDFF, #fff);
}
.inner {
width: 300px;
height: 300px;
background: #fff;
box-shadow: 0 0 2px rgba(0,0,0,.1);
}
.holder-tag {
position: relative;
width: 0;
height: 0;
left: 300px;
}
.holder-tag .tag {
position: absolute;
right: -30px;
top: 20px;
border-bottom: 20px solid #900;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
height: 10px;
width: 90px;
transform: rotate(45deg);
}
.holder-tag span {
position: absolute;
right: -18px;
top: 25px;
width: 110px;
line-height: 1px;
color: #fff;
font: normal 14px Arial, Verdana;
text-align: center;
padding: 5px 0 0 0;
box-sizing: border-box;
transform: rotate(45deg);
}
.content {
width: 80%;
padding: 10px;
}
<div class="container">
<div class="inner">
<div class="holder-tag">
<div class="tag"></div>
<span>new</span>
</div>
<div class="content">
<p>
You can write text here without worrying about space.
</p>
</div>
</div>
</div>