텍스트를 90도 회전하고 원래 여백을 제거하는 방법 [중복]

Dec 23 2020

그래서 나는 텍스트를 90deg로 회전시키는이 문제가 있지만 여백은 여전히 ​​원본과 동일합니다 (텍스트를 회전하지 않은 경우)

이미지를 회전 한 후 여백은 동일하게 유지됩니다. (여백이 텍스트를 회전 한 새로운 방향을 따르기를 원합니다)

(더 잘 보이도록 빨간색 윤곽선을 넣었습니다.)

또한 가능하다면 왼쪽의 흰색을 채우기 위해 빨간색 윤곽선을 만들 수 있습니까? (패딩을 사용해 보았지만 원하는 방식으로 작동하지 않습니다)

다음은 코드입니다.

<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>

그리고 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);
}

감사합니다! 내 하찮은 영어 실력에 죄송하다는 말씀을 드리고 싶습니다

답변

1 George Dec 23 2020 at 09:06

나는 이렇게 시도했다. 그리고 그것은 효과가있었습니다.

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