JSFiddle - React, Tailwind, and code Playground

by tomprogramming

HTML

<div class="tip-wrapper ne">
    <img src="http://www.placecage.com/128/128" />
</div>
<div class="tip-wrapper se">
    <img src="http://www.placecage.com/128/128" />
</div>
<div class="tip-wrapper sw">
    <img src="http://www.placecage.com/128/128" />
</div>
<div class="tip-wrapper nw">
    <img src="http://www.placecage.com/128/128" />
</div>

CSS

.tip-wrapper {
    display:inline-block;
    background-color:rgba(140,150,140,.5);
    border:1px solid #000;
    width:64px;
    height:64px;
    padding:4px;
}
.se {
    border-radius: 100% 100% 0 100%;
}
.ne {
    border-radius: 100% 0 100% 100%;
}
.nw {
    border-radius: 0 100% 100% 100%;
}
.sw {
    border-radius: 100% 100% 100% 0;
}

.tip-wrapper img {
    border-radius:100%;
    width:100%;
    height:100%;
}

body { background-color: rgba(255,90,0,1); margin:20px;}