I would like to know if you can do this effect only with CSS , the problem is that I do not know how to do the "triangle" below the rectangle
<divclass="titulo">Título</div><h1>&bnsp;</h1> <style type="text/css">.titulo{width: 200px; height: 45px; line-height: 45px; background: #ccc; color: black;} h1{position: absolute; left: 0; top: 45px; background: #ccc;}</style>
CSS
.menu{
margin: 10px;
}
.ret-cinza{
position: relative;
height: 50px;
width: 32px;
left: 3px;
background: grey;
}
.tri {
top: -48px;
left: 5px;
width: 0;
height: 0;
position: relative;
border-style: solid;
border-width: 0 30px 18px 0;
border-color: transparent #007700 transparent transparent;
}
.ret-msg{
position: relative;
left: 5px;
height: 30px;
width: 120px;
top: -48px;
background: linear-gradient(90deg, green,green, #0066ff);
}
HTML
<div class="menu">
<div class="ret-cinza"></div>
<div class="ret-msg"></div>
<div class="tri"></div>
</div>
The triangle was made using border, there are several other ways to do it.
Yes, it does. Give a little work:
html
<div class="gradient triangle"></div>
css
.gradient { /* Our base */
width:200px;
height:200px;
background: linear-gradient(to bottom, #7d7e7d 0%,#0e0e0e 100%);
margin:0 auto;
margin-top:50px;
}
.triangle {
background:transparent;
/* comment to see rectangle */ overflow: hidden; /**/
margin: 0 auto;
/* uncomment to see rhombus * outline: solid 1px red; /**/
width: 8.66em; /* height*sqrt(3)/2 */ height: 10em;
transform: rotate(-90deg) skewY(30deg);
}
.triangle:before, .octagon:before, .octagon.border:after {
display: block; /* to be able to apply width/ height/ transform */
width: inherit; height: inherit;
transform: skewY(-30deg) rotate(60deg) translate(50%);
background: linear-gradient(to bottom, #7d7e7d 0%,#0e0e0e 100%);
background-size: cover;
content: '';
}
.triangle { transform:translateX(-50px) rotate(300deg) skewY(30deg); }