테두리가 있는 CSS가 있는 삼각형

StackOverflow https://stackoverflow.com//questions/25082685

  •  02-01-2020
  •  | 
  •  

문제

먼저 바이올린은 다음과 같습니다. http://jsfiddle.net/krish7878/kuG6X/3/

텍스트 풍선의 테두리만 있는 CSS 삼각형이 필요합니다. 배경은 투명해야 합니다.

암호:

HTML:<div class="arrow-up"> </div>

CSS:

.arrow-up {
  position:absolute;
  top:50px;
  left:5px;
  width: 0;
  height: 0;
  border-left: 0px solid transparent;
  border-right: 42px solid transparent;
  border-top: 42px solid black;
  margin: 10px; 
  -ms-transform: rotate(315deg); /* IE 9 */
  -webkit-transform: rotate(315deg); /* Chrome, Safari, Opera */
  transform: rotate(315deg);
}
도움이 되었습니까?

해결책

누군가 이미 이 질문에 대해 꽤 좋은 답변을 게시했습니다. https://stackoverflow.com/a/18607208/1320911

http://jsfiddle.net/wmDNr/3/

 .triangle { 
     position: relative;
     width: 20px;
     margin-top: 100px;
 }
 .triangle>div { 
     width: 20px;
     height: 2px;
     background: red;
     margin-top: 100px;
 }

 .triangle>div:before {
     content: " ";
     display: block;
     width: 20px;
     height: 2px;
     background: red;
     -webkit-transform: rotate(56deg);
     -moz-transform: rotate(56deg);
     -ms-transform: rotate(56deg);
     transform: rotate(56deg);
     position: absolute;
     top: -8px;
     right: -5px;
 }
 .triangle>div:after {
     content: " ";
     display: block;
     width: 20px;
     height: 2px;
     background: red;
     -webkit-transform: rotate(-56deg);
     -moz-transform: rotate(-56deg);
     -ms-transform: rotate(-56deg);
     transform: rotate(-56deg);
     position: absolute;
     top: -8px;
     left: -5px;
 }

다른 팁

왜 CSS를 사용해야합니까?그것은 단지 바이트입니다.삼각형에 HTML 특수 기하학적 모양을 사용하십시오.

Normal Triangle: &#9651;
Right Showing Triangle:  &#9655;  
Down Pointing Triangle: &#9661; 
Left Pointing Triangle: &#9665;

인터넷을 통해 많은 노력을 절약하고 더 빠르게 사용할 수 있습니다.

⚠:브라우저 호환성 확인

전체 기하학적 참조: http://www.alanwood.net/unicode/geometric_shapes.html

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top