I would like to make this negative curve using CSS or Jquery, is it possible?
I would like to make this negative curve using CSS or Jquery, is it possible?
Yes it is possible to do this, you can use shape-outside:circle();
in modern browsers.
Example:
.wrapper {
width: 25%;
height: auto;
float: left;
margin-right:5rem;
-webkit-shape-outside:circle();
shape-outside:circle();
}
.circulo {
border-radius: 50%;
width: 200px;
height: 200px;
background: #cff;
}
<div class="wrapper ">
<div class="circulo"></div>
</div>
<p>As armas e os barões assinalados, Que da ocidental praia Lusitana, Por mares nunca de antes navegados, Passaram ainda além da Taprobana, Em perigos e guerras esforçados, Mais do que prometia a força humana, E entre gente remota edificaram Novo Reino, que tanto sublimaram;</p>
<p>E também as memórias gloriosas Daqueles Reis, que foram dilatando A Fé, o Império, e as terras viciosas De África e de Ásia andaram devastando; E aqueles, que por obras valerosas Se vão da lei da morte libertando; Cantando espalharei por toda parte, Se a tanto me ajudar o engenho e arte.</p>
jsFiddle: link
var circulo = document.querySelector('.circulo');
for (var i = 0; i < 10; i = i + 0.15) {
var el = document.createElement('div');
var cos = Math.abs(Math.cos(i) * 100);
el.style.width = cos + 'px';
el.style.opacity = i / 10 - 0.15;
circulo.appendChild(el);
}
var lusiadas = ["As armas e os barões assinalados, Que da ocidental praia Lusitana, Por mares nunca de antes navegados, Passaram ainda além da Taprobana, Em perigos e guerras esforçados, Mais do que prometia a força humana, E entre gente remota edificaram Novo Reino, que tanto sublimaram. E também as memórias gloriosas Daqueles Reis, que foram dilatando A Fé, o Império, e as terras viciosas De África e de Ásia andaram devastando; E aqueles, que por obras valerosas Se vão da lei da morte libertando; Cantando espalharei por toda parte, Se a tanto me ajudar o engenho e arte.", "Cessem do sábio Grego e do Troiano As navegações grandes que fizeram; Cale-se de Alexandro e de Trajano A fama das vitórias que tiveram; Que eu canto o peito ilustre Lusitano, A quem Neptuno e Marte obedeceram: Cesse tudo o que a Musa antígua canta, Que outro valor mais alto se alevanta.", " E vós, Tágides minhas, pois criado Tendes em mim um novo engenho ardente, Se sempre em verso humilde celebrado Foi de mim vosso rio alegremente, Dai-me agora um som alto e sublimado, Um estilo grandíloquo e corrente, Porque de vossas águas, Febo ordene Que não tenham inveja às de Hipoerene. ", " Dai-me uma fúria grande e sonorosa, E não de agreste avena ou frauta ruda, Mas de tuba canora e belicosa, Que o peito acende e a cor ao gesto muda; Dai-me igual canto aos feitos da famosa Gente vossa, que a Marte tanto ajuda; Que se espalhe e se cante no universo, Se tão sublime preço cabe em verso. ", " E vós, ó bem nascida segurança Da Lusitana antígua liberdade, E não menos certíssima esperança De aumento da pequena Cristandade; Vós, ó novo temor da Maura lança, Maravilha fatal da nossa idade, Dada ao mundo por Deus, que todo o mande, Para do mundo a Deus dar parte grande."];
var el = document.createElement('p');
el.innerHTML = lusiadas.join('<br /><br />');
circulo.appendChild(el);
.circulo div {
height: 10px;
border:1px solid red;
float: left;
clear: both;
margin-right: 10px;
}
.circulo{
width: 400px;
}
<div class="circulo"></div>