É possível fazer um box de texto com border radius negativa? – jquery css3 css-border-radius

Pergunta:


Gostaria quer fazer essa curva negativa usando CSS ou Jquery, é possível? Segue imagem de exemplo.

Autor da pergunta Marcelo Ronkenoli

Sergio

Sim é possivel fazer esse efeito, podes usar shape-outside:circle(); em browsers modernos.

Exemplo:

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

Inspirado aqui e aqui.

Uma solução com JS/HTML/CSS para browsers antigos:

jsFiddle: http://jsfiddle.net/h07n28q0/

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>

Fonte

Related Posts:

Qual a diferença entre AppCompatActivity e Activity? – android android-activity
Pergunta: Qual a diferença da AppCompatActivity para Activity ? A partir de qual versão a AppCompatActivity foi adicionada ao Android? Autor da pergunta Luhhh A diferença reside ...
Como abreviar palavras em PHP? – php string
Pergunta: Possuo informações comuns como nome de pessoas e endereços, e preciso que elas contenham no máximo 30 caracteres sem cortar palavras. Exemplo: 'Avenida Natalino João Brescansin' ...
Qual é a finalidade de um parêntese vazio numa declaração Lambda? – c# expressões-lambda característica-linguagem
Pergunta: Criei um exemplo de uma declaração Lambda sem argumentos, entretanto, estou com duvidas referente a omissão do parêntese vazio () na declaração. Veja o exemplo: class ...
Boas práticas para URI em API RESTful – api rest restful
Pergunta: Estou com dúvida em relação às URIs de alguns recursos da api que estou desenvolvendo. Tenho os recursos projetos e atividades com relação 1-N, ...
Dúvidas sobre a integração do MySQL com Java – java mysql netbeans
Pergunta: Estou criando um sistema no NetBeans, utilizando a linguagem Java e o banco de dados MySQL. Escrevi o seguinte código para realizar a conexão ...
Qual é a finalidade da pasta Model do framework Inphinit? – php inphinit
Pergunta: No Inphinit micro-framework existe a pasta Model que fica dentro da pasta application, e nela é onde ficam as classes, mas eu estou muito ...
Uso do ‘@’ em variáveis – javascript typescript coffeescript
Pergunta: Vejo em algumas linguagens que compilam para javascript, como TypeScript e CoffeeScript, o uso do @ em variáveis, como também, casos em que o ...
Qual tamanho máximo um arquivo JSON pode ter? – json arquivo
Pergunta: Vou dar um exemplo para conseguir explicar minha duvida: Preciso recuperar informação de imagens vindas de uma API, esse banco de imagens me retorna JSON's ...
O que é Teste de Regressão? – terminologia engenharia-de-software testes
Pergunta: Na matéria de Teste de Software o professor abordou um termo chamado Teste de Regressão, isto dentro da disciplina de teste de software. Sendo ...
O que é um construtor da linguagem? – php característica-linguagem
Pergunta: Em PHP, já li e ouvi várias vezes a respeito dos Construtores da Linguagem. Os casos que sempre ouvi falar deles foi em casos ...
Função intrínseca para converter numérico para string – cobol
Pergunta: Estou a tentar saber se existe alguma função intrínseca do COBOL para converter um data numérico para string sem precisar usar a cláusula REDEFINES: ( ...
Porque usar implements? – java android
Pergunta: Qual a diferença entre usar btn.setOnClickListener(new OnClickListener() { e public class MainActivity extends Activity implements OnClickListener{ Estive fazendo um curso de Android e meu professor falou que ...
O que é XHTML e quando deve ser usado? – html xml xhtml
Pergunta: O que eu sei é que o XHTML precisa ser XML válido. Isso implica, por exemplo, que todas as tags precisam ser fechadas. Por ...
Uma placa aceleradora de vídeo pode melhorar o desempenho não-gráfico? [fechada] – desempenho
Pergunta: Para desenvolver em Ruby on Rails, eu utilizo aqui uma máquina virtual do VirtualBox com Ubuntu Server 14.04 sem interface gráfica instalada. Recentemente descobri uma ...
Concat() VS Union() – c# .net
Pergunta: Qual a diferença entre Concat() e Union() ? Quando usar Concat() e quando usar Union() ? Somente pode ser usado em list ? ...

Deixe uma resposta

O seu endereço de email não será publicado. Campos obrigatórios marcados com *