Articles of css shapes

Alinhar texto na linha inclinada

É possível deixar o texto alinhado em uma linha inclinada ? o alinhamento deve seguir a imagem oblíqua inclinada com o suporte necessário para o IE9 +? Meu código de exemplo: img { display: block; float: left; transform: rotate(-5deg); margin: 0 15px; } Lorem ipsum dolor sit amet. Vestibulum commodo volutpat a, convallis ac, laoreet […]

Canto inclinado na checkbox CSS

Eu tenho jogado com CSS por um curto período de tempo e estou tentando ter uma checkbox normal, mas com o canto superior esquerdo cortado em um ângulo de 45 graus. Nem uma pequena quantia; Eu estou olhando para um canto bastante grande nesse ângulo. Este efeito: Como devo fazer isso?

Como posso criar um “tail tooltip” usando CSS puro?

Acabei de me deparar com um truque CSS puro. Confira o violino … .tooltiptail { display: block; border-color: #ffffff #a0c7ff #ffffff #ffffff; border-style: solid; border-width: 20px; width: 0px; height: 0px; } .anothertail { background-image: url(http://static.jqueryfordesigners.com/demo/images/coda/bubble-tail2.png); display: block; height: 29px; width: 30px; } Cool Trick: How do I get this effect with only CSS? Isso cria […]

css: como desenhar o círculo com o texto no meio?

Eu encontrei este exemplo no stackoverflow: Desenhe Círculo usando css sozinho O que é ótimo. Mas gostaria de saber como modificar esse exemplo para que eu possa include texto no meio do círculo? Eu também achei isso: centralização vertical e horizontal do texto em círculo em CSS (como o distintivo de notificação do iPhone) mas […]

É possível um raio de borda côncavo?

Aqui está um exemplo simples e convexo. http://jsfiddle.net/swY5k/ #test{ width: 200px; height: 200px; background: #888888; border-radius: 50px; } No entanto, eu quero um raio de borda côncava. Eu tentei fazer o raio da borda negativo, mas isso não funcionou. Exemplo de côncavo / convexo:

CSS3 Transform Skew One Side

É possível criar “CSS3 Transform Skew One Side” Eu encontrei uma solução, mas não é útil para mim, porque eu preciso usar uma imagem de fundo (não de cor) #skewOneSide { border-bottom: 40px solid #FF0000; border-left: 50px solid rgba(0, 0, 0, 0); height: 0; line-height: 40px; width: 100px; } Mesmo este JsFiddle também não é […]

Como inclinar o elemento, mas manter o texto normal (sem distorção)

É possível reproduzir esta imagem usando apenas CSS? Quero aplicar isso ao meu menu, para que o plano de fundo marrom apareça na instância hover Eu não sei como fazer isso, só tenho; .menu li a:hover{ display:block; background:#1a0000; padding:6px 4px; }

Onda (ou forma?) Com borda no CSS3

Eu preciso implementar uma forma de onda com CSS3, tentei implementar com CSS3 Shapes, mas eu não alcancei o resultado desejado. * { margin: 0; padding: 0; } body { background: #007FC1; } .container, .panel { border-bottom: 4px solid #B4CAD8; } .container { background-color: #fff; } .container > .text { padding: 0.5em; } .panel { […]

Inverta o canto arredondado em CSS?

Eu tenho um código css: -moz-border-radius-topleft:50px; Eu obtenho o resultado: Existe alguma possibilidade de dar assim:

Forma de triângulo com imagem de fundo

Eu estou trabalhando em um projeto que pede dois triângulos para armazenar imagens de fundo e ser links. Aqui está a minha simulação de como eu gostaria dos dois triângulos. Atualmente, tenho apenas dois divs que abrangem os 900 x 600 com cada triângulo como uma imagem de plano de fundo. A questão que estou […]