如何使用css在圓角外添加圖標？

Question

我有一個圓圈內的視頻，現在我想在圓圈外添加圖標。

這就是我想要的樣子。

這是我迄今為止嘗試過的

 body, html { overflow: hidden; margin: 0px; padding: 0px; } .video-conatiner_datavideo { width: 250px; height: 250px; border-radius: 125px; -webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%); position: absolute; bottom: 0px; right: 0px; } video { width: 500px; height: 500px; position: absolute; top: -125px; left: -125px; }

 <div class="video-container"> <div class="video-container_details"> <img src="/videoexplainer/images/camera.png"> <img src="/videoexplainer/images/close_button.png"> <img src="/videoexplainer/images/pause_button.png"> </div> <div class="video-conatiner_datavideo"> <video controls> <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4"> </video> </div> </div>

老實說，我嘗試了不同的方法，但不幸的是，我一無所獲。 我沒有想法。

我需要改變什么才能得到我想要的？

Answer 1

我懷疑使用 CSS transform-origin屬性或matrix函數可以更好地編碼此草圖。 但是在我的示例中，我逐個計算了70 + 150*cos(x)和70 - 150*sin(x)的x等於pi/6倍數（這並不太可怕）。

 #circone{ margin: 100px; position: relative; background-color: #f00; width: 200px; height: 200px; border-radius: 100px; } .cism { position: absolute; width: 60px; height: 60px; border-radius: 30px; } #twoa {transform:translate(70px, -80px);background-color:#0f0} #twob {transform:translate(145px, -60px);background-color:#00f} #twoc {transform:translate(200px, -5px);background-color:#ff0} #twod {transform:translate(220px, 70px);background-color:#f0f} #twoe {transform:translate(200px, 145px);background-color:#0ff}

 <div id="circone"> <div class="cism" id="twoa"> </div> <div class="cism" id="twob"> </div> <div class="cism" id="twoc"> </div> <div class="cism" id="twod"> </div> <div class="cism" id="twoe"> </div> </div>

然后，您可以為每個圓圈或視頻使用不同的background-image （如果您願意）。