Articles of css shapes

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 […]

Triângulo responsivo do CSS com largura dos por cento

O código abaixo irá criar uma seta logo abaixo de um elemento : JSFiddle .btn { position: relative; display: inline-block; width: 100px; height: 50px; text-align: center; color: white; background: gray; line-height: 50px; text-decoration: none; } .btn:after { content: “”; position: absolute; bottom: -10px; left: 0; width: 0; height: 0; border-width: 10px 50px 0 50px; border-style: […]

Controlar o comprimento do traço da borda tracejada e a distância entre os traços

É possível controlar o comprimento e a distância entre traços de borda tracejada em CSS? Este exemplo abaixo é exibido de maneira diferente entre os navegadores: div { border: dashed 4px #000; padding: 20px; display: inline-block; } I have a dashed border! Grandes diferenças: IE 11 / Firefox / Chrome Existem methods que possam fornecer […]

Raio de borda em porcentagem (%) e pixels (px) ou em

Se eu usar um valor de pixel ou em para raio de borda, o raio da aresta será sempre um arco circular ou uma forma de comprimido, mesmo que o valor seja maior que o maior lado do elemento. Quando eu uso porcentagens , o raio da aresta é elíptico e começa no meio de […]

Círculo de Progresso CSS

Pesquisei este site para encontrar as barras de progresso, mas as que consegui encontrar mostram círculos animados que atingem o total de 100%. Eu gostaria que parasse em certas porcentagens, como na imagem abaixo. Existe alguma maneira que eu possa fazer isso usando apenas CSS?

Forma ondulada com css

Estou tentando recriar esta imagem com CSS: Eu não precisaria disso para repetir. Isso é o que eu comecei, mas tem apenas uma linha reta: #wave { position: absolute; height: 70px; width: 600px; background: #e0efe3; }

Raio de borda de inserção com CSS3

Existe uma maneira de criar um raio de borda com css3? (Sem imagens) Eu preciso de um raio de borda como este:

Como criar um círculo com links no lado da borda

Eu estou tentando fazer um círculo como este . Eu consegui fazer isso no violino, mas o problema é que eu preciso de cada lado laranja para ser um link e não posso fazê-lo com bordas. Se alguém puder me ajudar com isso, serei muito grato. #circle { width: 200px; height: 200px; border-radius: 50%; background: […]