Difficulty Making a Different Shape

Asked

Viewed 117 times

2

div {
	width: 280px;
	height: 280px;
	background: #1e90ff;
	-webkit-clip-path: polygon(15% 0, 100% 0%, 100% 29%, 41% 49%);
clip-path: polygon(15% 0, 100% 0%, 100% 29%, 41% 49%);
}
<div></div>

Good morning, good afternoon and good night.

I’m trying to make a shape in a different format only I couldn’t. I tried to do it with border and polygon.

inserir a descrição da imagem aqui

That’s the format! If anyone knows any way to do it there! I even managed to make the format with the polygon, but I couldn’t round off the bottom

html css html5 web-application front-end

  • Does it have any gradient or is it solid color? An alternative could be SVG.

  • I put the code using Polygon. I just couldn’t round the tip.

  • I noticed kkkk until to make the rounded tip but I would have to put in the hand stitch by stitch of the round part.

  • You may find the answers to this question helpful: http://answall.com/q/159540/51124

1 answer

0

Clip-path has limited support yet and does not work in IE or Edge for example https://caniuse.com/#feat=css-clip-path. So what I would point out to you is to use a sequence of Transforms to perfectly fit your shape.

I did this step by step applying individually each of the transforms for you to better understand how the form was built. I left everything commented on in the code. Read also the Mozilla documentation on Transform: https://developer.mozilla.org/en-US/docs/Web/CSS/transform

.box {
    float: left;
    overflow: hidden;
    width: 100px;
    height: 100px;
    border: 1px solid #000;
    box-sizing: border-box;
    margin-right: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.shape {
    width: 80px;
    height: 80px;
/* coloca os cantos arredondados */
    border-radius: 10px;
/* coloca o gradiente de cor de fundo */
    background-image: radial-gradient(royalblue, navy);
}
.box:nth-child(2) .shape{
/* desalinha o eixo vertical */
    transform: skew(30deg);
}
.box:nth-child(3) .shape{
/* desalinha o eixo vertical e rotaciona um pouco a forma no próprio eixo */
    transform: skew(30deg) rotate(-10deg);
}
.box:nth-child(4) .shape{
/* desalinha o eixo vertical e rotaciona um pouco a forma no próprio eixo e ajusta a posição no topo a direita usando X, Y */
    transform: skew(30deg) rotate(-10deg) translate(60%, -50%);
}
.box:nth-child(4) {
    transform: scale(2) translate(25%, 25%);
}
<div class="box">
    <div class="shape"></div>
</div>
<div class="box">
    <div class="shape"></div>
</div>
<div class="box">
    <div class="shape"></div>
</div>
<div class="box">
    <div class="shape"></div>
</div>

Browser other questions tagged html css html5 web-application front-end

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