Metni 90 derece döndürme ve orijinal kenar boşluğu nasıl kaldırılır [çoğalt]

Dec 23 2020

bu yüzden metnimi 90 derece döndürdüğümde bu problemi yaşıyorum, ancak kenar boşluğu hala orijinalle aynı (metni döndürmediğim yer)

Resmi döndürdükten sonra kenar boşlukları aynı kalıyor. (Kenar boşluklarının metni döndürdüğüm yeni yönü izlemesini istiyorum)

(Daha iyi görülebilmesi için kırmızı çerçeve koydum.)

Ayrıca, eğer mümkünse, soldaki beyazı doldurmak için kırmızı dış çizgiyi yapabilir miyim? (Dolgu kullanmayı denedim ama istediğim gibi çalışmıyor)

İşte kod

<script src="https://kit.fontawesome.com/2c7037d9e8.js" crossorigin="anonymous"></script>
<div class='color-pick'>
    <div class='color-pick-text'>
        Colors <i class="fas fa-caret-down"></i>
    </div>
    <div class='color-pick-box'>
        <div class='color-opt color-red'></div>
        <div class="color-opt color-orange"></div>
        <div class="color-opt color-yellow"></div>
        <div class="color-opt color-green"></div>
        <div class="color-opt color-blue"></div>
        <div class="color-opt color-indigo"></div>
        <div class="color-opt color-purple"></div>
        <div class="color-opt color-lime"></div>
        <div class="color-opt color-pink"></div>
        <div class="color-opt color-silver"></div>
        <div class="color-opt color-custom"></div>
    </div>
</div>

ve css:

.color-pick-box{
    background-color:#4c4c47;  
    display:flex;
    width:150px;
    flex-wrap: wrap;
}
.color-pick{
    border:1px solid blue;
    display:inline-flex;
    align-items: center;
    overflow:hidden;
}

.color-pick-text{
    text-align:center;
    border:1px solid red;
    transform:rotate(90deg);
 }

.color-opt{
    margin:5px;
    height:20px;
    width:20px;
    border-radius:50%;
}

.color-pick .fas{
    display:inline;
}

.color-red{
    background:red;
}
.color-orange{
    background:orange;
}
.color-yellow{
    background:yellow;
}
.color-green{
    background:green;
}
.color-blue{
    background:blue;
}
.color-indigo{
    background:indigo;
}
.color-purple{
    background:purple;
}
.color-lime{
    background:lime;
}
.color-pink{
    background:pink;
}
.color-silver{
    background:silver;
}
.color-custom{
    background: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);
}

Teşekkür ederim! Kötü ingilizcem için özür dilerim

Yanıtlar

1 George Dec 23 2020 at 09:06

Ben böyle denedim. Ve işe yaradı.

.color-pick-text{
    text-align:center;
    border:1px solid red;
    writing-mode: vertical-lr;
}