Блог

Главная - Вопросы по программированию - Почему цвет границы отображается как цвет фона, если установлено значение прозрачный?

Почему цвет границы отображается как цвет фона, если установлено значение прозрачный?

#html #css

#HTML #css — код

Вопрос:

Я создаю несколько иллюстраций CSS, и я хочу создать треугольную форму. Но вы увидите, что прозрачная граница на самом деле не является прозрачной. Он имеет тот же цвет, что и цвет фона <div> .

 .triangle {
  background-color: #ff3e30;
  height: 0px;
  width: 0px;
  border-bottom: 100px solid #ff3e30;
  border-left: 50px solid transparent;    /* This is the culprit */
} 
 <div class="triangle"></div>

Но когда я использую другой цвет, это показывает, что созданная фигура должна быть треугольником, если граница прозрачная.

 .triangle {
  background-color: #ff3e30;
  height: 0px;
  width: 0px;
  border-bottom: 100px solid #ff3e30;
  border-left: 50px solid black;    /* Changed to black */
} 
 <div class="triangle"></div>

Итак, как это исправить?

Ответ №1:

Мешал цвет фона.

 .triangle {
  //background-color: #ff3e30;
  height: 0px;
  width: 0px;
  border-left: 50px solid transparent;
  border-bottom: 100px solid #ff3e30;
} 
 <div class="triangle"></div>

Ответ №2:

по умолчанию фон покрывает пограничную область. Вы можете изменить это поведение с помощью background-clip (или просто удалить его, как указано @Mahmood Kiaheyrati)

 .triangle {
  background-color: #ff3e30;
  background-clip:padding-box;
  height: 0px;
  width: 0px;
  border-bottom: 100px solid #ff3e30;
  border-left: 50px solid transparent;
} 
 <div class="triangle"></div>

Комментарии:

1. Большое спасибо за упоминание background-clip свойства. Это действительно полезно, когда кто-то предоставляет несколько решений или альтернатив.

Ответ №3:

Надеюсь, у вас все хорошо.

Здесь, по этой ссылке, вы найдете некоторую треугольную форму. Вы можете попрактиковаться, чтобы лучше понять, как это работает.

https://css-tricks.com/the-shapes-of-css/

css для triangle-bottomleft

 #triangle-bottomleft {
  width: 0;
  height: 0;
  border-bottom: 100px solid red;
  border-right: 100px solid transparent;
}

HTML

 <div id="triangle-bottomleft"></div>

Комментарии:

1. Спасибо. Проблема была вызвана цветом фона.