<div class="logo">
<div class="r">R</div>
<div class="star"></div>
</div>
:root {
--yellow: #ffad00;
--black: #000;
--white: #fff;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
*::before,
*::after {
box-sizing: border-box;
content: '';
position: absolute;
}
body {
display: grid;
place-items: center;
min-height: 100vh;
}
.logo {
width: 60vmin;
height: 60vmin;
background-color: var(--yellow);
border-radius: 10vmin;
border: 1.5vmin solid var(--black);
}
.r {
font-family: Helvetica;
font-weight: bold;
font-style: italic;
font-size: 40vmin;
position: relative;
left: 12vmin;
}
.star,
.star::before,
.star::after {
width: 0;
height: 0;
}
.star {
border-left: 4vmin solid transparent;
border-right: 4vmin solid transparent;
border-bottom: 6vmin solid var(--white);
position: relative;
top: -14vmin;
left: 39.5vmin;
}
.star::before {
border-left: 10vmin solid transparent;
border-right: 10vmin solid transparent;
border-bottom: 7vmin solid var(--white);
transform: rotate(-32deg);
left: -10vmin;
top: 4vmin;
}
.star::after {
border-left: 10vmin solid transparent;
border-right: 10vmin solid transparent;
border-bottom: 7vmin solid var(--white);
transform: rotate(32deg);
left: -10vmin;
top: 4vmin;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.