1
votes

Comment créer une ligne avec une courbe au milieu en CSS

J'ai besoin de créer une ligne en CSS pur avec une fossette au milieu. Est-il possible? Si oui, comment puis-je faire cela?

Les règles CSS que je connais pour rendre le div entier en demi-cercle ou changer la bordure de l'élément.

Par exemple: border-radius , ou perspective ou border-top-radius ...

css css-shapes

0 commentaires

3 Réponses :

-1
votes

ce n'est pas possible avec border-radius, essayez avec clip-path

1 commentaires

Avez-vous un exemple? avec une ligne qui traverse

3
votes

Voici mon point de vue en utilisant un pseudo-contenu positionné de manière absolue et un conteneur relatif. Je crée une forme ovale dans le contenu :: after et cache la moitié supérieure de celui-ci en utilisant overflow: hidden .

<div class="thing"></div>

.thing {
  width: 400px;
  height: 200px;
  position: relative;
  overflow: hidden;
}

.thing::before,
.thing::after {
  content: '';
  z-index: 1;  
  position: absolute;
}

.thing::before {
  border-top: 2px solid black;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;  
}

.thing::after {
  border-radius: 60%;
  left: 20px;
  right: 20px;
  height: 300px;
  border: 2px solid black;
  top: -234px;
  background-color: white;
}

html { margin: 3em; }

jsFiddle

0 commentaires

2
votes

Vous pouvez envisager plusieurs arrière-plans. Un radial-gradient pour la courbe et un linear-gradient pour les petites lignes:

<div class="box"></div>

<div class="box" style="--rad:80px;--p:20px;"></div>

<div class="box" style="--rad:50px;--p:20px;--b:2px"></div>

<div class="box" style="--rad:100px;--p:70px;--b:8px"></div>

.box {
  --b:5px; /*border*/
  --r:100px; /*radius*/
  --p:50px; /*offset from top */
  height:100px;
  background:
     radial-gradient(circle var(--r)
       at 50% calc(-1*var(--p)), 
       transparent calc(100% - var(--b) - 1px), #000 calc(100% - var(--b)), 
       #000 100%)
      0 0/100% var(--b),
    
     radial-gradient(circle var(--r)
       at 50% calc(-1*var(--p)), 
       transparent calc(100% - var(--b) - 1px), #000 calc(100% - var(--b)), 
       #000 99%,transparent 100%);
  background-repeat:no-repeat;
}

body {
  background:pink;
}

Vous pouvez ajouter une variable CSS pour mieux contrôler les différentes valeurs. J'envisagerai une autre syntaxe pour mieux contrôler les lignes du haut en utilisant un autre radial-gradient qui sera le même que le principal mais avec une taille réduite afin que nous n'en voyions qu'une petite partie et nous gardons son dernière couleur à être le noir pour avoir nos lignes.

<div class="box"></div>

.box {
  width:300px;
  height:200px;
  background:
     linear-gradient(#000,#000) top left/70px 5px,
     linear-gradient(#000,#000) top right/70px 5px,
    
    
     radial-gradient(circle 100px, /*circle with 100px radius*/
       transparent calc(100% - 6px), #000 calc(100% - 5px), /*around 5px border*/
       #000 99%,transparent 100%)
      0 -150px; /*we move the centre of the circle by -150px to top*/
  background-repeat:no-repeat;
}

body {
  background:pink;
}

3 commentaires

@velvetInk si on comprend le truc, ça peut être très simple;)

Vous êtes si doué pour les dégradés radiaux! J'ai besoin de lire sur eux. Avez-vous une ressource d'apprentissage préférée?

@AndyHoffman pas vraiment, j'utilise généralement la spécification officielle pour comprendre les différentes valeurs et comment cela fonctionne ( drafts.csswg.org/css-images-3/#radial-gradients ) alors j'essaye de jouer avec eux afin de réaliser différentes choses.