CSS - 사용자 정의 화살표 만들기

안녕하세요 아래 이미지처럼 보이는 CSS에 사용자 정의 화살표를 만들려고합니다.
이상적으로 저는 두 모양을 삼각형과 직사각형 (아마도 CSS:after과 :before을 사용하여)에 덧씌우면서 이것을 만들고 싶습니다. 그러나 나는 너무 어려워서 CSS과 관련하여 어려움을 겪었습니다. 그것처럼 보이지 않는 지금까지 난 그냥이CSS - 사용자 정의 화살표 만들기

을 작동하는 것입니다 :

.arrow { 
 
    width: 0; 
 
    height: 0; 
 
    border-top: 60px solid transparent; 
 
    border-bottom: 60px solid transparent; 
 
    border-left: 60px solid #ccc; 
 
}

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

출처

2017-02-08 es3735746

은 왜 크기가 조정할 수 있습니다 이미지를 사용하지 않고 다음 화살표를 그리려고 CSS를 사용하고 계십니까? – thiebo

이미지로 추가하고 싶지 않기 때문에 – es3735746

너무 열심히 아니 :before 의사 요소 및 일부 변환을 사용하여 만들려면 :

.container { 
 
    padding: 100px; 
 
} 
 

 
.arrow { 
 
    display: inline-block; 
 
    height: 150px; 
 
    background: #000; 
 
    width: 75px; 
 
} 
 
.arrow:before { 
 
    content: ""; 
 
    border-top: 100px solid #000; 
 
    border-left: 100px solid transparent; 
 
    border-right: 100px solid transparent; 
 
    border-bottom: 100px solid transparent; 
 
    transform: rotateZ(180deg) translateY(100%) translateX(31%); 
 
    position: relative; 
 
    display: inline-block; 
 
}

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

출처

2017-02-08 20:04:23 TricksfortheWeb

는 여기에 또 다른 옵션들 중 하나입니다.

.arrow{ 
 
    width: 0; 
 
    height: 0; 
 
    border-top: 60px solid transparent; 
 
    border-bottom: 60px solid transparent; 
 
    border-left: 60px solid #ccc; 
 
    position: relative; 
 
    margin: 0 0 0 100px; 
 
} 
 

 
.arrow::before{ 
 
    content: ""; 
 
    height:50px; 
 
    width:80px; 
 
    background: #ccc; 
 
    position: absolute; 
 
    top: 0; 
 
    margin: -100%; 
 
    display: block; 
 
    transform: translateX(-160%) translateY(-50%); 
 
}

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

출처

2017-02-08 20:06:00

하나 개의 사각형을 만든 다음 :before 의사 요소 위에 삼각형을 추가하고 그게입니다.

.arrow { 
 
    width: 36px; 
 
    height: 50px; 
 
    background: #3F3F3F; 
 
    position: relative; 
 
    margin: 60px; 
 
} 
 
.arrow:before { 
 
    content: ''; 
 
    border-style: solid; 
 
    border-width: 0 40px 40px 40px; 
 
    border-color: transparent transparent #3F3F3F transparent; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 50%; 
 
    transform: translate(-50%, -100%); 
 
}

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

출처

2017-02-08 20:13:01

설명하고 입증하기 :

CSS 화살표 1 테두리 측에 착색 한 후 투명하므로 형상의 중간 부분으로의 다른 3 측을 이동시킴으로써 만들어

그들은 보이지 않지만 남아있는 색깔면을 삼각형으로 자른다. 이것에 대한 약식은 TOP RIGHT BOTTOM LEFT입니다. 위쪽을 향한 삼각형을 만들려면 세 번째 속성 또는 아래쪽을 사용합니다.

의사 요소를 사용하면 (화살표를 다른 요소에 추가하려는 경우) content:'' 의사 요소를 "작성"해야합니다. 나는 그들이 흐름에 있고 상호간에 상호 작용할 수 있도록 (display: block) 그들을 설정했다.

사각형을 지정하면 left: 30px (삼각형 너비의 절반)을 사용하여 삼각형 중간에 위치시킬 수 있습니다.

.arrowWrapper:before { 
 
    content: ''; 
 
    display: block; 
 
    width: 0; 
 
    height: 0; 
 
    border-style: solid; 
 
    border-width: 0 60px 60px 60px; 
 
    border-color: transparent transparent black transparent; 
 
    /* border-color: TOP RIGHT BOTTOM LEFT; */ 
 
} 
 

 
.arrowWrapper:after { 
 
    content: ''; 
 
    position: relative; 
 
    display: block; 
 
    width: 60px; 
 
    height: 60px; 
 
    background: black; 
 
    left: 30px; 
 
}

<div class="arrowWrapper"></div>

출처

2017-02-08 20:19:55 Alejalapeno

http://www.cssportal.com/css3-shapes/에서 들어 올려 수정 :

#eq-triangle { 
 
    width: 0; 
 
    height: 0; 
 
    border-bottom: 104px solid blue; 
 
    border-left: 60px solid transparent; 
 
    border-right: 60px solid transparent; 
 
} 
 

 
#rectangle { 
 
    width: 40px; 
 
    height: 80px; 
 
    background: blue; 
 
    margin-left: 40px; 
 
}

<div id="eq-triangle"></div> 
 
<div id="rectangle"></div>

출처

2017-02-08 20:21:21 gwally

CSS - 사용자 정의 화살표 만들기

답변

관련 문제