-1

Gostaria de saber se tem como fazer esse efeito apenas com CSS, o problema é que eu não sei como fazer o "triangulo" de baixo do retangulo 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>
5
  • 1
    Pode descrever na pergunta qual é exatamente "esse efeito"? Tem degradê, o retângulo cinza a esquerda, o triângulo abaixo.
    – Woss
    8/10/2017 às 14:43
  • Me refiro ao design da imagem
    – goio
    8/10/2017 às 14:44
  • Exatamente. Pode descrever o que quer fazer? Você quer recriar exatamente o estilo da imagem? O que já tentou fazer? Pode editar a pergunta e colocar qual foi a dificuldade?
    – Woss
    8/10/2017 às 14:47
  • Esquece o gradient, o objetivo é fazer o retangulo e o triangulo abaixo, gostaria de um começo pois não tenho ideia de onde começar, o retangulo até sei fazer, mais o triangulo é complicado pra mim
    – goio
    8/10/2017 às 14:50
  • Dá uma olhada nesses links. O segundo é pra mostrar que com Css dá pra fazer bastante coisa maujor.com/blog/pg_apoio/desafio15 maujor.com/blog/pg_apoio/desafio17/marcos-xavier.html 8/10/2017 às 15:44

2 Respostas 2

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>

foi feito o triangulo usando border, existem várias outras formas de fazer.

1
  • Triângulo vc pode pegar um quadrado ou um retângulo e girar ele usando transform:rotate(angulo); e usar Z-index: -1; no elemento que ele fique atrás do retângulo maior. 8/10/2017 às 15:18
1

Tem sim. Dá um pouquinho de trabalho:

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/

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .