noder_ss
@noder_ss
Человек хороший, вёрстка по душе

Возможно сделать так, чтобы текст не наследовал skew от родителя?

Добавил !important, и ничего
<body>
    <div class="btn2">

<div class="btn-item-main2">Кнопка</div>

    </div>
   
</body>
<style>
    @import url(https://fonts.googleapis.com/css?family=Russo+One:regular);
    @import url(https://fonts.googleapis.com/css?family=Montserrat:100,200,300,regular,500,600,700,800,900,100italic,200italic,300italic,italic,500italic,600italic,700italic,800italic,900italic);
     @import url(https://fonts.googleapis.com/css?family=Montserrat+Alternates:100,100italic,200,200italic,300,300italic,regular,italic,500,500italic,600,600italic,700,700italic,800,800italic,900,900italic);
    .btn2{
      transform: skew(-23deg);
      user-select: none; cursor: pointer;
        font-size: 1.15vw;
        border-radius: 0.2vw;
     
        font-family:montserrat Alternates ;
        color: rgb(255, 255, 255);
        font-weight: 600;
        width: 12.5vw;
        margin-top: 10vw;
    display: flex;
      align-items: center;
      justify-content: center;
        height: 3.3vw;
        background: #041B15;
    }
    
   
    .btn-item-main2{ 
        transform: skew(0deg) !important;
       
    }
    </style>
  • Вопрос задан
  • 45 просмотров
Решения вопроса 1
SuperToster
@SuperToster
.btn-item-main2 { 
    transform: skew(23deg)       
}

Преобразование не является наследуемым свойством.
Но согласно спецификации, преобразование создаёт новое "пространство координат" для своих дочерних элементов, это то, что происходит в вашем примере. Значение свойства преобразования равно none, но это не означает, что на него не влияет преобразование родительского элемента.
www.w3.org/TR/css-transforms-1/#transform-rendering
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы