CSS 유사 요소를 사용하여 삼각형 힌트 상자 만들기

1187 단어
CSS 위조 요소는 매우 유용하다. 이것은 불필요한 DOM 요소를 필요로 하지 않고 흔히 볼 수 있는 기능을 실현하는 방법을 제공한다. 다음은 삼각형을 가진tooltip을 실현하는 것이다.
다음은 DOM 구조입니다.
This is content

下面是对应的CSS样式:

.tooltip-wrapper {
	position: absolute;
	z-index: 9999;
	padding: 5px;
	background: white;
	border: 1px solid #7d7d7d;
	border-radius: 5px;
}
.tooltip-wrapper .arrow,
.tooltip-wrapper .arrow:after {
	position: absolute;
	display: block;
	width: 0;
	height: 0;
	border-color: transparent;
	border-style: solid;
}
.tooltip-wrapper .arrow {
	border-width: 11px;
}
.tooltip-wrapper .arrow:after {
	content: "";
	border-width: 10px;
}
.tooltip-wrapper.bottom .arrow {
	top: -11px;
	left: 50%;
	margin-left: -11px;
	border-top-width: 0;
	border-bottom-color: #7d7d7d;
}
.tooltip-wrapper.bottom .arrow:after {
	top: 1px;
	margin-left: -10px;
	border-top-width: 0;
	border-bottom-color: white;
}

  
  
  
전재 대상:https://www.cnblogs.com/clumiere/p/4497588.html

좋은 웹페이지 즐겨찾기