Untitled

<main>
  <a style="--angle: 30deg"></a>
  <a style="--angle: 150deg"></a>
  <a style="--angle: 90deg"></a>
  <p style="--angle: 0deg"></a>  
  <p style="--angle: 60deg"></a>
  <p style="--angle: 120deg"></a>
  <p style="--angle: 180deg"></a>
  <p style="--angle: 240deg"></a>
  <p style="--angle: 300deg"></a>
  <div></div>
</main>
<style>  
  :root {
    --pink: #F075B0;
    --white: #F7BED9;
    --bg: #5F133F;
  }
  p {
    position: absolute;
	width: 0;
	height: 0;
    top: calc(134px - cos(var(--angle)) *95px);
    left: calc(200px + sin(var(--angle)) * 95px);
	border-left: 25px solid transparent;
	border-right: 25px solid transparent;
	border-bottom: 30px solid var(--white);
    transform: translate(-50%, -50%) rotate(var(--angle));
  }
  html { background: var(--bg)}
  div {
    position: absolute;
    transform: translate(-50%, -50%);
    width: 50px;
    height: 50px;
    top: 150px;
    left: 200px;
    background: var(--white);
    border-radius: 50%
  }
  a {
    position: absolute;    
    width: 160px;
    height: 50px;
    left: 120px;
    top: 125px;
    background: var(--pink);
    transform: rotate(var(--angle))
  }
</style>