Difficulty in making a different Shape

Question

Difficulty in making a different Shape

Navigation

#1 by (0 votes)

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 evening.

I'm trying to make a shape in a different format but I just could not. I tried to do with border and polygon .

That's the format! If anyone knows of any way to do it there! I even managed to format with polygon , but I could not round the bottom

html html5 css front-end

asked by anonymous 03.11.2016 / 20:28

1 answer

Sort lists in dictionaries in python SQL in DB MySQL

score 0 · Answer 1

Clip-path has limited support yet and does not work on IE or Edge for example link . So what I would tell you is to use a Transforms sequence to perfectly fit your shape .

I did this step by step individually applying each of the transforms to you to better understand how the form was built. I left everything commented in the code. Read the Mozilla documentation on Transform : link

.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>