CSS를 사용하여 멋진 화살표를 만드는 방법?

102

좋아, 모두가 이것을 사용하여 삼각형을 만들 수 있다는 것을 알고 있습니다.

#triangle {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid red;
}

그리고 그것은 삼각형으로 채워진 고체를 생성합니다. 그런데 이렇게 속이 빈 화살 모양의 삼각형을 어떻게 만들까요?

점에서 교차하는 두 개의 선만있는 화살표. 보다 큼 기호 :>

html css css-shapes

— Tommay
소스

3

두 개의 회전 된 직사각형.

— SLaks

51

jsfiddle.net/j08691/a0uogod0

— j08691

5

매우 큰 글꼴을 사용하십니까?

— GolezTrol

2

AAAAAHHHH. j08691이 있습니다. 감사!

— Tommay 2015

4

@ j08691 돈에 대한 권리를 확인하십시오. 이것을 달성하는 또 다른 방법은 굉장 글꼴 같은 글꼴 팩을 사용하는 것입니다 fortawesome.github.io/Font-Awesome/icon/chevron-right

— crazymatt

93

before또는 after의사 요소를 사용하고 여기에 CSS를 적용 할 수 있습니다. 다양한 방법이 있습니다. before및을 모두 추가 하고 after각각을 회전하고 배치하여 막대 중 하나를 형성 할 수 있습니다. 더 쉬운 해결책은 before요소 에만 두 개의 테두리를 추가 하고를 사용하여 회전하는 것 transform: rotate입니다.

pseuso 요소 대신 실제 요소를 사용하는 다른 솔루션을 보려면 아래로 스크롤하십시오.

이 경우 목록에 글 머리 기호로 화살표를 추가하고 em크기를 사용하여 목록 의 글꼴에 맞게 크기를 조정했습니다.

ul {
    list-style: none;
}

ul.big {
    list-style: none;
    font-size: 300%
}

li::before {
    position: relative;
    /* top: 3pt; Uncomment this to lower the icons as requested in comments*/
    content: "";
    display: inline-block;
    /* By using an em scale, the arrows will size with the font */
    width: 0.4em;
    height: 0.4em;
    border-right: 0.2em solid black;
    border-top: 0.2em solid black;
    transform: rotate(45deg);
    margin-right: 0.5em;
}

/* Change color */
li:hover {
  color: red; /* For the text */
}
li:hover::before {
  border-color: red; /* For the arrow (which is a border) */
}

<ul>
    <li>Item1</li>
    <li>Item2</li>
    <li>Item3</li>
    <li>Item4</li>
</ul>

<ul class="big">
    <li>Item1</li>
    <li>Item2</li>
    <li>Item3</li>
    <li>Item4</li>
</ul>

스 니펫 확장

물론 당신은 사용할 필요가 없습니다 before또는 after당신은뿐만 아니라 일반 요소에 같은 트릭을 적용 할 수 있습니다. 위 목록의 경우 추가 마크 업이 필요하지 않기 때문에 편리합니다. 그러나 때로는 어쨌든 마크 업을 원하거나 필요할 수 있습니다. div또는 a를 사용할 수 있으며 span, 심지어 사람들 i이 '아이콘'에 대한 요소를 재활용하는 것을 보았습니다 . 마크 업은 아래와 같이 보일 수 있습니다. <i>이것을 사용 하는 것이 옳은지는 논란의 여지가 있지만, 안전한쪽에 있기 위해 스팬을 사용할 수도 있습니다.

/* Default icon formatting */
i {
  display: inline-block;
  font-style: normal;
  position: relative;
}

/* Additional formatting for arrow icon */
i.arrow {
    /* top: 2pt; Uncomment this to lower the icons as requested in comments*/
    width: 0.4em;
    height: 0.4em;
    border-right: 0.2em solid black;
    border-top: 0.2em solid black;
    transform: rotate(45deg);
}

And so you can have an <i class="arrow" title="arrow icon"></i> in your text.
This arrow is <i class="arrow" title="arrow icon"></i> used to be deliberately lowered slightly on request.
I removed that for the general public <i class="arrow" title="arrow icon"></i> but you can uncomment the line with 'top' <i class="arrow" title="arrow icon"></i> to restore that effect.

스 니펫 확장

더 많은 영감을 얻고 싶다면 Nicolas Gallagher 의 멋진 CSS 아이콘 라이브러리를 확인하세요 . :)

— GolezTrol
소스

이것은 꽤 잘 작동했지만 수정이 필요한 몇 가지가 있습니다. 1. 나머지 텍스트를 아래로 이동하지 않고 화살표를 약간 아래로 이동하려면 어떻게해야합니까? #arrow :: after를 시도한 다음 margin-top을 설정했지만 텍스트를 포함하여 모든 것이 아래로 이동했습니다. 2. 마우스 오버시 색상을 변경하기 위해 필요합니다. 지금은 텍스트 만 색상이 변경됩니다. 텍스트와 화살표를 모두 변경하려면 어떻게해야합니까?

— Tommay

화살표의 색상을 변경하려면 border-color화살표가 실제로 문자가 아니라 테두리이므로을 변경해야합니다 . 위치의 경우, 추가 할 수있는 position: relative화살표와 사용하여 주위를 이동 top하고 left. 수정 된 첫 번째 스 니펫과 두 번째 스 니펫에서 위치 지정을 모두 표시했습니다. 호버 된 목록 항목 li:hover::before의 before의사 요소 를 참조 하는 멋진 조합에 유의하십시오 .

— GolezTrol

사실, 한 가지 더 : 이제이 텍스트를 중앙에 배치하려고합니다 (after 요소 포함). 문제는이 after 요소가 보이지 않는 공간을 많이 차지하고 결과적으로 텍스트가 매우 중심에서 벗어난 것처럼 보인다는 것입니다. 보이지 않는 공간을 0으로 설정하려면 어떻게해야합니까? 나는 left : 0 및 right : 0, margin-left : 0 및 margin-right : 0과 함께 시도했지만 둘 다 작동하지 않았습니다.

— Tommay dec.

무슨 뜻인지 정확히 모르겠지만, 의사 요소는 이미 0그 자체 로 여백이 있으므로 공백을 제거하려면 음의 여백이 필요합니다. 예를 들어 두 번째 스 니펫에서 margin-left: -0.4em;공백없이 이전 단어 옆에 화살표를 추가 할 수 있습니다 .

— GolezTrol

나는에 새로운 질문을 게시 stackoverflow.com/questions/27549099/...

— Tommay

71

이것은 다른 제안보다 훨씬 쉽게 해결할 수 있습니다.

단순히 정사각형을 그리고 border결합하는 두면에만 속성을 적용합니다 .

그런 다음 화살표가 가리키는 방향에 따라 사각형을 회전합니다. transform: rotate(<your degree here>)

.triangle {
    border-right: 10px solid; 
    border-bottom: 10px solid;
    height: 30px;
    width: 30px;
    transform: rotate(-45deg);
}

<div class="triangle"></div>

스 니펫 확장

— 앨런 더닝
소스

1

이것은 완벽한 답입니다. 정말 받아 들여 져야합니다. 매우 간단하고 모든 부분이 효과적입니다.

— Andrew Faulkner

@AndrewFaulkner 기꺼이 도와주었습니다.

— Alan Dunning

38

반응 형 셰브론 / 화살

그들은 크기를 조정 하여 자동으로 텍스트 되어 색 같은 색. 플러그 앤 플레이 :)
jsBin 데모 플레이 그라운드

body{
  font-size: 25px; /* Change font and  see the magic! */
  color: #f07;     /* Change color and see the magic! */
} 

/* RESPONSIVE ARROWS */
[class^=arr-]{
  border:       solid currentColor;
  border-width: 0 .2em .2em 0;
  display:      inline-block;
  padding:      .20em;
}
.arr-right {transform:rotate(-45deg);  -webkit-transform:rotate(-45deg);}
.arr-left  {transform:rotate(135deg);  -webkit-transform:rotate(135deg);}
.arr-up    {transform:rotate(-135deg); -webkit-transform:rotate(-135deg);}
.arr-down  {transform:rotate(45deg);   -webkit-transform:rotate(45deg);}

This is <i class="arr-right"></i> .arr-right<br>
This is <i class="arr-left"></i> .arr-left<br>
This is <i class="arr-up"></i> .arr-up<br>
This is <i class="arr-down"></i> .arr-down

스 니펫 확장

— 로코 C. 불잔
소스

1

와, 그 기호는 실제로 "오른쪽 상단 모서리"라고합니다 ! 좋은. :) 테두리보다 너비에 대한 제어가 적지 만 글꼴 가능성을 표시하려면 +1합니다. 다른 기호의 경우 CSS 모양 트릭보다 더 나을 수 있습니다.

— GolezTrol 2014

사용자에게 글꼴이 없으면 글꼴 아이콘이 제대로 작동하지 않으므로 대부분의 시스템에서 사용할 수있는 글꼴에 대한 적절한 대체 방법이 있는지 확인해야합니다. CSS를 통해 글꼴을 다운로드하도록 선택할 수도 있지만 몇 개의 아이콘에 대해 그렇게하는 것은 대역폭 낭비입니다. 하지만 아이콘이 많거나 자신 만의 스타일로 만들고 싶다면 모든 아이콘을 자신의 아이콘 글꼴에 추가하고 CSS를 통해로드하도록 선택할 수 있습니다. 이렇게하면 소수의 기호에 대한 큰 글꼴을 다운로드하지 않고도 올바른 글꼴을 사용할 수 있다는 확신을 가질 수 있습니다.

— GolezTrol 2014

HTML 4.0에서는 38887자를 포함하는 총 세트가 채택되었습니다. 이후 v. 6.2.0 September 2012 1유니 코드 UTF-8문자를 110182로 상승을 설정하고, 이제 HTML5 기본 UTF-8을 갖는 보이는 우리의 문자는 좋은 찾고 : unicode.org/Public/UNIDATA/UnicodeData.txt

— 로코 C. Buljan

캐릭터가 존재한다고해서 표시 할 수있는 것은 아닙니다. 표시하려면 적절한 글꼴이 필요합니다. 이것이 귀하의 답변의 첫 번째 버전에있는 문자가 실패한 이유입니다. 내 브라우저의 기본 글꼴에 해당 문자가 포함되지 않았기 때문입니다. 따라서 이와 같은 문자를 사용하려면 사용할 글꼴을 지정해야하며 모든 플랫폼에서 사용할 수없는 경우 다른 글꼴에 대한 적절한 대체를 제공해야합니다. 예를 들어 \231d캐릭터는 여기에서 사용할 수 있지만 Mac 또는 Android 장치에서는 사용할 수 없습니다. HTML 버전과 응답 인코딩은 이와 관련이 없습니다.

— GolezTrol 2014

더 얇게 만들 수 있습니까? 너무 뚱뚱해지는 대신? 글꼴 두께를 변경해도 아무 효과가 없습니다.

— James111 2016-06-21

14

다음은 다른 접근 방식입니다.

1) 곱셈 문자 사용 : ××

2) 그것의 절반을 숨기십시오 overflow:hidden

3) 그런 다음 삼각형을 팁의 의사 요소로 추가합니다.

여기서 장점은 변환이 필요하지 않다는 것입니다. (IE8 +에서 작동합니다)

깡깡이

.arrow {
  position: relative;
}
.arrow:before {
  content: '×';
  display: inline-block;
  position: absolute;
  font-size: 240px;
  font-weight: bold;
  font-family: verdana;
  width: 103px;
  height: 151px;
  overflow: hidden;
  line-height: 117px;
}
.arrow:after {
  content: '';
  display: inline-block;
  position: absolute;
  left: 101px;
  top: 51px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 25px 0 25px 24px;
  border-color: transparent transparent transparent black;
}

<div class="arrow"></div>

스 니펫 확장

— Danield
소스

2

Internet explorer, chrome 및 firefox에서 작동합니다.

— Thomas

11

그냥 사용 전 및 후 의사 요소 - CSS를

*{box-sizing: border-box; padding: 0; margin: 0}
:root{background: white; transition: background .3s ease-in-out}
:root:hover{background: red }
div{
  margin: 20px auto;
  width: 150px;
  height: 150px;
  position:relative
}

div:before, div:after{
  content: '';
  position: absolute;
  width: 75px;
  height: 20px;
  background: black;
  left: 40px
}

div:before{
  top: 45px;
  transform: rotateZ(45deg)
}

div:after{
  bottom: 45px;
  transform: rotateZ(-45deg)
}

<div/>

스 니펫 확장

— 길 다스 탐보
소스

8

테두리를 사용 하고 CSS3 속성을 사용 하지 않는 다른 방법 :

div, div:after{
    border-width: 80px 0 80px 80px;
    border-color: transparent transparent transparent #000;
    border-style:solid;
    position:relative;
}
div:after{
    content:'';
    position:absolute;
    left:-115px; top:-80px;
    border-left-color:#fff;
}

<div></div>

스 니펫 확장

— 웹 티키
소스

4

>그 자체가 매우 멋진 화살입니다! div 앞에 추가하고 스타일을 지정하십시오.

div{
  font-size:50px;
}
div::before{
  content:">";
  font: 50px 'Consolas';
  font-weight:900;
}

<div class="arrowed">Hatz!</div>

스 니펫 확장

— 니 카엘
소스

2

화살표가 아니라 "보다 큼"기호입니다.

— Mark Knol

@MarkKnol 이것과 다른 사람의 화살표가 어떻게 보이는지의 차이점은 무엇입니까? 이것은 나에게 아직 최고의 솔루션 인 것 같습니다.

— dallin

2

Roko C. Buljan 상자 그림자 트릭을 사용하여 호버 효과가있는 왼쪽 오른쪽 화살표

.arr {
  display: inline-block;
  padding: 1.2em;
  box-shadow: 8px 8px 0 2px #777 inset;
}
.arr.left {
  transform: rotate(-45deg);
}
.arr.right {
  transform: rotate(135deg);
}
.arr:hover {
  box-shadow: 8px 8px 0 2px #000 inset
}

<div class="arr left"></div>
<div class="arr right"></div>

스 니펫 확장

— Vinayakj
소스

1

input내 프로젝트에서 화살표를 화살표 로 변경해야했습니다 . 아래는 최종 작업입니다.

#in_submit {
  background-color: white;
  border-left: #B4C8E9;
  border-top: #B4C8E9;
  border-right: 3px solid black;
  border-bottom: 3px solid black;
  width: 15px;
  height: 15px;
  transform: rotate(-45deg);
  margin-top: 4px;
  margin-left: 4px;
  position: absolute;
  cursor: pointer;
}

<input id="in_submit" type="button" class="convert_btn">

스 니펫 확장

여기 바이올린

— Mostafa
소스

멋진 코드! 하기 어려운 요소를 하나만 사용합니다. :)

— www139

0

.arrow {
  display : inline-block;
  font-size: 10px; /* adjust size */
  line-height: 1em; /* adjust vertical positioning */
  border: 3px solid #000000;
  border-left: transparent;
  border-bottom: transparent;
  width: 1em; /* use font-size to change overall size */
  height: 1em; /* use font-size to change overall size */
}

.arrow:before {
  content: "\00a0"; /* needed to hook line-height to "something" */
}

.arrow.left {
  margin-left: 0.5em;
  -webkit-transform: rotate(225deg);
  -moz-transform: rotate(225deg);
  -o-transform: rotate(225deg);
  -ms-transform: rotate(225deg);
  transform: rotate(225deg);
}

.arrow.right {
  margin-right: 0.5em;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

.arrow.top {
  line-height: 0.5em; /* use this to adjust vertical positioning */
  margin-left: 0.5em;
  margin-right: 0.5em;
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

.arrow.bottom {
  line-height: 2em;
  /* use this to adjust vertical positioning */
  margin-left: 0.5em;
  margin-right: 0.5em;
  -webkit-transform: rotate(135deg);
  -moz-transform: rotate(135deg);
  -o-transform: rotate(135deg);
  -ms-transform: rotate(135deg);
  transform: rotate(135deg);
}

<div>
  here are some arrows
  <div class='arrow left'></div> space
  <div class='arrow right'></div> space
  <div class='arrow top'></div> space
  <div class='arrow bottom'></div> space with proper spacing?
</div>

스 니펫 확장

Roko C와 비슷하지만 크기와 배치를 조금 더 제어합니다.

— 단발
소스