Можно ли как-нибудь сделать этот треугольник прозрачным?

Question

[Кот Фрейда]

Суть такова:

есть css,

.some-element::before {
          content: '';
          position: absolute;
          width: 0;
          height: 0;
          top: -14px;
          border-left: 7px solid transparent;
          border-right: 7px solid transparent;
          border-bottom: 14px solid #ddd;
        }

который рисует серый треугольничек сверху поля ответа.



Можно ли его сделать прозрачным внутри, оставив серыми только границы при помощи css, или без свг фоном тут никак?

Answer 1

[Narts]

1. ::before оставляете как есть
2. добавляете такой же ::after, только размеры треугольника на 1пкс меньше чем в ::before
3. у ::after фон делаете белым
4. profit

То есть у нас идет серый треугольник, а поверх него белый. И т.к. размеры отличаются всего на 1 пкс, выглядит как бордер треугольника

Comments

[Кот Фрейда]

Точно, я должен был до этого догадаться, спасибо большое!

[Narts]

medbrat69, не за что :)