css picture

css picture

https://github.com/cyanharlow

https://diana-adrianne.com/

demo

https://github.com/cyanharlow/purecss-vignes

https://diana-adrianne.com/purecss-vignes/

.strawberry .fruit {
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background-color: #D83131;
    border-radius: 50% 50% 50% 50% / 24% 25% 62% 73%;
    box-shadow: inset 0 -23px 25px -3px #750000, inset 0 0 16px 3px #690303, inset 10px -27px 34px 7px #800, inset 53px -19px 71px 3px #A40101, inset 57px 71px 13px -34px #FFDADA;
}

<div class="strawberry">
                <div class="fruit"></div>
                <div class="seed seed1"></div>
                <div class="seed seed2"></div>
                <div class="seed seed3"></div>
                <div class="seed seed4"></div>
                <div class="seed seed5"></div>
                <div class="seed seed6"></div>
                <div class="seed seed7"></div>
                <div class="seed seed8"></div>
                <div class="seed seed9"></div>
                <div class="seed seed10"></div>
                <div class="seed seed11"></div>
                <div class="seed seed12"></div>
                <div class="seed seed13"></div>
                <div class="seed seed14"></div>
                <div class="seed seed15"></div>
                <div class="seed seed16"></div>
                <div class="seed seed17"></div>
                <div class="seed seed18"></div>
                <div class="seed seed19"></div>
                <div class="seed seed20"></div>
                <div class="seed seed21"></div>
                <div class="seed seed22"></div>
                <div class="seed seed23"></div>
                <div class="seed seed24"></div>
                <div class="seed seed25"></div>
                <div class="seed seed26"></div>
                <div class="seed seed27"></div>
                <div class="seed seed28"></div>
                <div class="seed seed29"></div>
                <div class="seed seed30"></div>
                <div class="seed seed31"></div>
                <div class="seed seed32"></div>
                <div class="seed seed33"></div>
                <div class="seed seed34"></div>
                <div class="seed seed35"></div>
                <div class="seed seed36"></div>
                <div class="seed seed37"></div>
                <div class="seed seed38"></div>
                <div class="seed seed39"></div>
                <div class="seed seed40"></div>
                <div class="seed seed40"></div>
                <div class="seed seed41"></div>
                <div class="seed seed42"></div>
                <div class="seed seed43"></div>
                <div class="seed seed44"></div>
                <div class="seed seed45"></div>
                <div class="seed seed46"></div>
                <div class="seed seed47"></div>
                <div class="seed seed48"></div>
                <div class="seed seed49"></div>
                <div class="seed seed50"></div>
                <div class="seed seed51"></div>
                <div class="seed seed52"></div>
                <div class="seed seed53"></div>
                <div class="seed seed54"></div>
                <div class="seed seed55"></div>
                <div class="seed seed56"></div>
                <div class="seed seed57"></div>
                <div class="seed seed58"></div>
                <div class="seed seed59"></div>
                <div class="seed seed60"></div>
                <div class="seed seed61"></div>
                <div class="seed seed62"></div>
                <div class="seed seed63"></div>
                <div class="seed seed64"></div>
                <div class="seed seed65"></div>
                <div class="seed seed66"></div>
                <div class="seed seed67"></div>
                <div class="seed seed68"></div>
                <div class="seed seed69"></div>
                <div class="seed seed70"></div>
                <div class="leaf">
                    <div class="tip1"></div>
                    <div class="tip2"></div>
                    <div class="tip3"></div>
                    <div class="tip4"></div>
                    <div class="tip5"></div>
                    <div class="tip6"></div>
                </div>
                <div class="stem"></div>
            </div>

---