0

Como eu criaria uma moldura estilizada no css? Quero colocar um vídeo do youtube no meu site, mas no fundo gostaria de fazer uma moldura estilizada como tentei desenhar na imagem abaixo, com alguma cor.

inserir a descrição da imagem aqui

Queria saber como eu 'desenho' isso no css, eu sei fazer o quadrado, mas não consigo fazer distorcer sabe?

 <style type="text/css">

div.retangulo {
 line-height:0;
 width:200px;
 height:160px;
 border: 25px solid #00f;
 }



</style>
1

2 Respostas 2

3

Ricardo, você pode usar os poligonos para fazer isso.

<html><head></head>
<body>
    <style>
#imagem {
    background: red;
    width: 240px;
    height: 144px;
    float: left;
    margin-left: 30px;
    margin-top: 18px;
}
#moldura {
    background: blue;
    width: 300px;
    height: 180px;
    -webkit-clip-path: polygon(100% 100%, 90% 30%, 90% 10%, 20% 10%, 0% 0%, 10% 70%, 10% 90%, 80% 90%);
    clip-path: polygon(100% 100%, 90% 30%, 90% 10%, 20% 10%, 0% 0%, 10% 70%, 10% 90%, 80% 90%);
}
    </style>
    <div id="moldura">
        <div id="imagem">

        </div>
    </div>

</body>
</html>

Resultado

Este site pode te ajudar: https://bennettfeely.com/clippy/

3
  • que baita ferramenta bicho Commented 25/04/2019 às 18:57
  • Sim, você cria uma div moldura e dentro dela vai o vídeo, e a moldura você modela com este método.
    – RickPro
    Commented 25/04/2019 às 19:04
  • Ótima referencia RickPro! Commented 25/04/2019 às 19:34
2

Aqui tem um modelo usando pseudo-elemento em um box que vai ter o iframe do vídeo dentro. O pulo do gato é usar transform: skew(15deg, 5deg); no pseudo elemento do box isso vai "entortar" o elemento na forma que vc quiser. Vc pode brincar com esses deg para ver o que mais te agrada.

inserir a descrição da imagem aqui

Segue o código da imagem acima:

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}
  
.box {
  margin-top: 50px;

  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.box::after {
  content: "";
  position: absolute;
  top: -20px;
  margin: auto;
  z-index: -1;
  width: 600px;
  height: 355px;
  background-color: red;
  transform: skew(15deg, 5deg);
}

  
<div class="box">
  <iframe width="560" height="315" src="https://www.youtube.com/embed/g76sAYHhEus" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

1

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 .