<script lang="ts"></script>

<div>
	<div class="round_base">
		<div class="inside"><p>HTML</p></div>
	</div>
</div>

<style lang="scss">
	p {
		font-weight: 600;
	}
	.round_base {
		width: 100px;
		height: 100px;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		outline: 0.1px solid black;
		background-image: linear-gradient(to right, red 5px 5px, black 5px 5px, red 1px);
		// background-size: 1px 20px;
		// background-repeat: no-repeat;
	}
	.inside {
		width: 70px;
		height: 70px;
		// background-color:$basecolor2;
		border-radius: 50%;
		text-align: center;
		vertical-align: middle;
		outline: 0.1px solid black;
		display: flex;
		align-items: center;
		justify-content: center;
	}
</style>
