-1

Eu preciso fazer esta forma circular abaixo, com um traço diagonal em CSS.

Alguém pode me ajudar?

inserir a descrição da imagem aqui

1
  • Já tentou alguma coisa? Qual foi o resultado?
    – Woss
    16/05/2019 às 15:24

2 Respostas 2

3

Basta usar o linear-gradiente na diagonal nao tem muito segredo

body {
  background-color: azure; 
}
.box {
  width: 100px;
  height: 100px;
  border: 7px solid #666;
  border-radius: 50%;
  background-image: linear-gradient(to top left, transparent 47%, red 48%, red 53%, transparent 54%)
}
<div class="box"></div>

3

Pode usar também um pseudo-elemento ::after, centralizando-o com flexbox e aplicando uma rotação de 45 graus:

.proibido {
   width: 150px; /* largura da circunferência */
   height: 150px; /* altura da circunferência */
   border: 10px solid #ddd; /* largura e cor da borda da circunferência */
   border-radius: 50%;
   position: relative;
   display: flex;
   justify-content: center;
}

.proibido::after{
   content: '';
   position: absolute;
   top: 0;
   width: 10px; /* largura da faixa */
   height: 100%;
   background: #BF2600; /* cor da faixa */
   transform-origin: center;
   transform: rotate(45deg);
}
<div class="proibido"></div>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .