How would I create an SVG Triangle with a Circle around it?

Discussion in 'Web Development' started by MateoLeo, Oct 4, 2017.

  1. MateoLeo

    MateoLeo Registered Member

    Joined:
    Sep 10, 2017
    Messages:
    6
    Likes Received:
    0
    Instead of using an image, if I wanted to make my own.

    Code:
    .image {
      background: url('http://via.placeholder.com/400x400');
      background-size: cover;
      border-radius: 50px;
    }
    
    .image:after {
      content: "";
      position: absolute;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      background-image: url(https://i.imgur.com/WSlJUPf.png);
      background-repeat: no-repeat;
      background-size: 24.5% Auto;
      background-position: 50% 50%;
    }
    
    
    <div class='outer'>
      <div class='tcell'>
        <div class='wrap'>
          <div class='inner'>
            <div class='image' onclick="thevid=document.getElementById('thevideo');
    thevid.style.display='block'; this.style.display='none';
    document.getElementById('iframe').src =
    document.getElementById('iframe').src.replace('autoplay=0','autoplay=1');"> </div>
    
            <div id='thevideo' style='display: none;'>
    
              <iframe frameborder='0'id='iframe' src='https://www.youtube.com/embed/_0ZCVrg6Kzs?rel=0&keyboard=1&disablekb=1&vq=medium&showinfo=0&controls=1&autoplay=0&iv_load_policy=3&fs=0&wmode=transparent'></iframe></div>
          </div>
        </div>
      </div>
    </div>
     

Share This Page