Vertical triangle css

Question

I need to create full width, transparent triangle with border and some elements inside via CSS. Does somebody know how to do that? Thanks in advance.

Answer 1

You can create triangle as vector (svg) here.
You can convert from svg file to base64 here.

body {
    background-color: #444;
}

#triangle {
    background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODAwIiBoZWlnaHQ9IjgwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KIDxnPgogIDx0aXRsZT5MYXllciAxPC90aXRsZT4KICA8cGF0aCBpZD0ic3ZnXzEiIGQ9Im0yLjk5LDc5Ni44MzM4MmwzOTYuOTk5OTgsLTc5My43NTA3bDM5Ni45OTk5OCw3OTMuNzUwN2wtNzkzLjk5OTk3LDB6IiBmaWxsPSIjZmZmZmZmIi8+CiA8L2c+Cgo8L3N2Zz4=");
    background-size: cover;
    background-repeat: no-repeat;
    height: 300px;
    position: relative;
    width: 300px;
}
#circle {
    background-color: #7220fd;
    border-radius: 50%;
    height: 90px;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, 20%);
    width: 90px;
}

<div id="triangle">
    <div id="circle"></div>
</div>

See it on jsfiddle.

You did not provide any code or background image to use, I have to generate new for testing and the result may not exactly to your screenshot. However you can change the triangle vector using the link above.

To customize circle position, change the argument of translate(). The first is horizontal position, second is vertical position.