Comment faire pour supprimer calc de la conique gradient de code

Question 1

Comment serait-ce gradient de code soit écrit sans calc?

C'est tout ce que je suis en train de comprendre comment le faire. https://jsfiddle.net/gwrcep3q/

.exitnew {
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  width: 48px;
  height: 48px;
  cursor: pointer;
  
  --b: 7px;
  --c: green 90deg, blue 0;
  background: conic-gradient(from 90deg at var(--b) var(--b), var(--c)) calc(100% + var(--b)/2) calc(100% + var(--b)/2)/ calc(50% + var(--b)) calc(50% + var(--b));
  border: 5px solid red;
  border-radius: 50%;
  transform: rotate(45deg);

<button class="exitnew" type="button" aria-label="Close"></button>

Question 2

Je ne sais pas pourquoi êtes-vous en insistant sur la suppression de calc(). Vous pouvez rendre votre code plus long à l'aide de 2 gradients si vous avez peur de calc() mais mieux apprendre quelque chose de nouveau:

.exitnew {
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  width: 48px;
  height: 48px;
  cursor: pointer;
  background:
    linear-gradient(green 0 0),
    linear-gradient(green 0 0)
    blue;
  background-size:7px 100%,100% 7px;
  background-position:center;
  background-repeat:no-repeat;
  border: 5px solid red;
  border-radius: 50%;
  transform: rotate(45deg);

<button class="exitnew" type="button" aria-label="Close"></button>

Temani Afif · Answer 1 · 2021-11-17T10:02:11

Je ne sais pas pourquoi êtes-vous en insistant sur la suppression de calc(). Vous pouvez rendre votre code plus long à l'aide de 2 gradients si vous avez peur de calc() mais mieux apprendre quelque chose de nouveau:

.exitnew {
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  width: 48px;
  height: 48px;
  cursor: pointer;
  background:
    linear-gradient(green 0 0),
    linear-gradient(green 0 0)
    blue;
  background-size:7px 100%,100% 7px;
  background-position:center;
  background-repeat:no-repeat;
  border: 5px solid red;
  border-radius: 50%;
  transform: rotate(45deg);

<button class="exitnew" type="button" aria-label="Close"></button>

Comment se fait que vous avez enlevé la conique gradient de? Ce n'est pas en mesure de travailler avec cette propriété?

Comment faire pour supprimer calc de la conique gradient de code

La question

La meilleure réponse

Dans d'autres langues

Cette page est dans d'autres langues

Populaires dans cette catégorie

Questions populaires dans cette catégorie