Can only do this with CSS3

Asked

Viewed 134 times

-1

I wonder if there’s any way to do that effect just with CSS, the problem is that I do not know how to do the "triangle" from below the rectangle inserir a descrição da imagem aqui

<div class="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
  • 1

    Can you describe in the question what exactly is "this effect"? It has gradient, the gray rectangle on the left, the triangle below.

  • I mean the design of the image

  • Exactly. Can you describe what you want to do? Do you want to recreate exactly the image style? What have you tried? You can [Dit] the question and ask what was the difficulty?

  • Forget the gradient, the goal is to make the rectangle and the triangle below, I would like a start because I have no idea where to start, the rectangle until I know how to do, but the triangle is complicated for me

  • Take a look at these links. The second is to show that with Css you can do a lot http://www.maujor.com/blog/pg_apoio/desafio15/ http://maujor.com/blog/pg_apoio/desafio17/marcos-xavier.html

2 answers

1

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>

was made the triangle using border, there are several other ways to do.

  • Triangle vc can take a square or a rectangle and rotate it using transform:rotate(angulo); and use Z-index: -1; in the element that is behind the larger rectangle.

1

There is. It takes a little bit of 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); }

https://jsfiddle.net/caiubyfreitas/hh1p3e2p/

Browser other questions tagged css

You are not signed in. Login or sign up in order to post.