거꾸로 된 캐럿

거꾸로 된 캐럿

---

HTML

 <span class="caret"></span> 

캐럿 화살표 ▼를 주지만, 다음과 같은 캐럿을 갖고 싶습니다 ▲.

Bootstrap에서 사용할 수있는 클래스가 있습니까? 그렇지 않은 경우이를 달성하는 방법은 무엇입니까?

---

캐럿 클래스의 부모 요소에 연결할 수있는 내장 부트 스트랩 클래스가 있습니다.

<span class="dropup">
    <span class="caret"></span>
</span>

부트 스트랩 2와 3 모두에서 작동합니다.

---

class를 사용하여 캐럿을 반전 caret-reversed시키고 기존 caret클래스 구현을 유지 한다고 가정 해 봅시다 .

CSS는 다음과 같습니다.

<span class="caret caret-reversed"></span> 

.caret.caret-reversed {
    border-top-width: 0;
    border-bottom: 4px solid #000000;
}

부트 스트랩 2와 3 모두에서 작동합니다.

업데이트 : 부트 스트랩 3.3.2 이후 .glyphicon-triangle-top와 .glyphicon-triangle-bottomglyphicons 사용할 수 있는지에 대한 대안으로 캔 작업 .caret과 그 반대의 버전.

표준

<span class="glyphicon glyphicon-triangle-bottom"></span>

반전

<span class="glyphicon glyphicon-triangle-top"></span>

---

이것은 나를 위해 일했습니다.

transform: rotate(180deg);

---

위쪽 화살표에 대한 새 CSS 클래스를 추가 할 수 있습니다.

<style>
 .caret-up{
    border-bottom: 10px solid #000000;
    border-left: 6px solid rgba(0, 0, 0, 0);
    border-right: 6px solid rgba(0, 0, 0, 0);
    content: "";
    display: inline-block;
    height: 0;
    vertical-align: top;
    width: 0;
  }

<span class="caret-up"></span>

데모 http://jsfiddle.net/tbgXj/3/

---

다음과 같이 할 수 있습니다.

HTML에서 :

<span class="caret caret-reversed"></span>

CSS에서 :

.caret-reversed{
  -ms-transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}

---

이 문제가 있었고 가장 좋은 해결책은 부트 스트랩 원본의 스타일을 편집하여 필요한 스타일을 얻는 것입니다.

따라서 여기에서 부트 스트랩 하나를 사용하는 모든 사람은 그 반대입니다.

.caret-up {
display: inline-block;
width: 0;
height: 0;
margin-left: 2px;
vertical-align: middle;
border-bottom: 4px dashed;
border-right: 4px solid transparent;
border-left: 4px solid transparent;
}

참고 URL : https://stackoverflow.com/questions/20760047/upside-down-caret