Articles of css shapes

Caixa de Seta com CSS

Como posso fazer essa checkbox no CSS? Eu vi alguns tutoriais que ensinam como criar checkboxs com setas, no entanto, no meu caso, nenhum desses tutoriais é adequado.

Contagem regressiva com barra de progresso circular

Eu criei uma contagem regressiva. Eu tenho uma borda que é feita circular. Como o cronômetro está tendendo para zero, a borda circular deve mudar de cor com decréscimo nos segundos. Eu criei o JSFIDDLE HTML 0.00 CÓDIGO JS var displayminutes; var displayseconds; var initializeTimer = 1.5 // enter in minutes var minutesToSeconds = initializeTimer*60; […]

Segmentos em um círculo usando CSS3

Eu sei que você pode fazer um círculo em CSS3 usando o hack do raio da borda. Mas há alguma maneira de fazê-los ter segmentos como este? Existe uma maneira de fazer isso através de HTML e CSS, mas não JS?

CSS3 Transform Skew

Alguém sabe como conseguir skew assim: Usando a nova propriedade de transformação do CSS? Como você pode ver, estou tentando distorcer os dois cantos, alguém sabe se isso é possível?

Criando um menu radial em CSS

Como faço para criar um menu que se parece com isso … Link para o PSD Eu não quero usar as imagens do PSD. Eu preferiria usar icons de algum pacote como o FontAwesome e ter o backgrounds / css gerado no CSS. Uma versão do menu que está usando o PSD para gerar imagens […]

Como desenhar um setor de círculo em CSS?

Bem, desenhar um círculo com CSS puro é fácil. .circle { width: 100px; height: 100px; border-radius: 100px; border: 3px solid black; background-color: green; } Como faço para desenhar um setor? Dado um grau X [0-360] eu quero desenhar um setor X graus. Posso fazer isso com CSS puro? Por exemplo: Obrigado + Exemplo Obrigado Jonathan, […]

É possível criar um canto angulado em CSS?

Eu estou querendo saber se existe alguma maneira de criar essa forma com CSS puro. Para estender esse problema ainda mais, essa forma precisa recortar a imagem dentro dela (pense nela como uma máscara – mas a borda cinza deve estar visível). Ou é melhor eu criar isto em canvas / svg?

desenhar linhas diagonais no fundo div com CSS

Tenho div para pré-visualização HTML: PREVIEW CSS: .preview-content { background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAGklEQVQIW2NkYGD4D8SMQAwGcAY2AbBKDBUAVuYCBQPd34sAAAAASUVORK5CYII=) repeat; width: 100%; min-height: 300px; max-height: 300px; line-height: 300px; text-align: center; vertical-align: middle; font-size: 2em; } Q: como adicionar linhas diagonais ao fundo div como na imagem nota: com CSS somente se possível Agradeço antecipadamente

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?