요소를 기울이면서 텍스트를 정상적으로 유지하는 방법 (비뚤어지지 않음)

요소를 기울이면서 텍스트를 정상적으로 유지하는 방법 (비뚤어지지 않음)

---

CSS 만 사용하여이 이미지를 재현 할 수 있습니까?

이걸 메뉴에 적용하고 싶기 때문에 갈색 배경이 hover인스턴스에 나타납니다.

나는 이것을하는 방법을 모른다.

.menu li a:hover{
     display:block;
     background:#1a0000;
     padding:6px 4px;
}

---

skew부모 요소 ( LI)와 그 자식 요소를 역으로 기울이기

nav li {
  display:inline-block;
  transition: background 0.2s;
  transform: skew(20deg);  /* SKEW */
}
nav li a {
  display:block;
  text-decoration:none;
  padding: 5px 10px;
  font: 30px/1 sans-serif;
  transform: skew(-20deg); /* INVERSE SKEW */
  color: #0bf;
}
nav li.active,
nav li:hover{
  background:#000;
}

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li class="active"><a href="#">Products</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

---

다음은 여러 브라우저에서 사용할 수있는 바이올린입니다. 몇 분 만에 만들었습니다.

내가 사용, 인수와 함께 연주 시도 :before하고 :after이 작업을 수행 할 수 있습니다.

https://jsfiddle.net/DTBAE/

---

transform: skew(X, Y)이를 위해 속성을 사용할 수 있습니다 . 기울어 진 외부 컨테이너를 만든 다음 내부 컨테이너에 반대 방향으로 기울여 텍스트를 다시 직선으로 기울입니다. 예를 들어이 바이올린을보십시오.

http://jsfiddle.net/UZ6HL/4/

당신이 말한 바에 따르면 이것이 당신이 원하는 것이라고 생각 합니다. 그렇지 않다면 항목이 배경을 표시해야 할 때를 명확히하십시오.

---

.skew {
  background: green;
  color: #fff;
  padding: 50px;
  transform: skewX(-7deg);
  font-size: 20px;
  font-weight: 700;
}

.skew p {
  transform: skewX(7deg);
}

<div class="skew">
  <p>This is caption</p>
</div>

여기 에 예가 있습니다.

---

IE 지원을 받으려면 -ms-transform: skew(20deg, 0deg);다른 모든 항목 옆에 추가하십시오 transform: skew(20deg, 0deg);.

참고 URL : https://stackoverflow.com/questions/17947565/how-to-skew-element-but-keep-text-normal-unskewed