CSS Türk Bayrağı Yapımı |

Mango 05-05-2021 Saat 19:55

HTML kodları:

PHP Kod:
<div class="turkey-flag">
    <div class="moon"><div>
    <div class="star"><div>
<div> 

CSS kodları:

PHP Kod:
* {
    padding: 0;
    margin: 0;
    list-style: none;
    border: 0;
    outline: 0;
    box-sizing: border-box;
}

.turkey-flag {
    width: 1200px;
    height: 800px;
    background-color: #e30a17;
    display: flex;
    align-items: center;
    justify-content: center;
    .moon {
        width: 400px;
        height: 400px;
        background: #fff;
        border-radius: 50%;
        position: relative;
        margin-left: -195px;
        &::before {
            content: '';
            width: 320px;
            height: 320px;
            background: #e30a17;
            position: absolute;
            top: 50%;
            right: -10px;
            border-radius: 50%;
            transform: translateY(-50%);
        }
    }
    .star {
        width: 200px;
        height: 200px;
        clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
        background: #fff;
        transform: rotate(-18deg);
        margin-left: -45px;
    }
} 