Как сделать прозрачный треугольник в круге?

Question

[Михаил Завалко]

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

Comments

[Артём Ведищев]

Шрифт Awesome fa-play-circle

[Михаил Завалко]

Артём Ведищев: Ну где ты был раньше?? Как я мог забыть это?! Блин)) Немножко не как на макете, но думаю это херня)

Answer 1

[Lumore]

SVG

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 16 16" style="enable-background:new 0 0 16 16;" xml:space="preserve">
  <g>
    <path style="fill: rgb(145, 220, 90);" d="M8,0C3.582,0,0,3.582,0,8s3.582,8,8,8s8-3.582,8-8S12.418,0,8,0z M5,12V4l7,4L5,12z"></path>
  </g>
</svg>

Comments

[Михаил Завалко]

Прикольно как вариант, буду пробовать, спасибо!))

Answer 2

[kulaeff]

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

Comments

[vvvadimos]

как это не сделать) нарисовал круг, вложил в элемент, элемент обрезать на треть, сделать еще два таких же, потом повернуть на нужный угол, и расположить один над одним. все реально, только стоит ли таких усилий все это, мало кто скажет что стоит. svg лучше все подойдет

[Михаил Завалко]

vvvadimos: будем пробовать svg, вон ниже дали инфу для мозга)

[Сергей Горячев]

На счет "не сделать" не соглашусь.
https://jsfiddle.net/9x1v1s8p/
Немного допилить до равностороннего треугольника надо.
А в целом, очень даже сделать)
Но я бы так делать не стал, SVG или Font Awesome справятся лучше.

[Сергей Горячев]

vvvadimos: Тоже хороший вариант)

[kulaeff]

Убедили. Только я бы не стал так извращаться и сделал бы с использованием SVG.

Answer 3

[twobomb]

Вот так можночистым css, ток добавь для кроссбраузерности moz-linear-gradient, webkit,o ....