如何使用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 this sketch属性或transform-origin函数可以更好地对matrix进行编码。但是在my example中，我逐个计算70 + 150*cos(x)和70 - 150*sin(x)的{​​{1}}等于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}

然后，您可以为每个圈子或视频使用不同的background-image。