CSS를 활용하여 하나의 DIV 요소로 숫자를 만들다

5671 단어 HTML CSS

개요

이런 숫자(7단)

<!DOCTYPE html>
<style>
  /* CSS */
</style>
<div class="display d4"></div>

나는 이렇게 단지 하나의 요소만 만들고 싶다.

방침.

나는 이렇게 분할해 보고 싶다.
어떤 부분을 표시하려면 클래스에서 지정하십시오.

창설

어쨌든 상술한 방침에 따라.해보다

.display {
  display: inline-block;
  box-sizing: border-box;
  position: relative;
  width: 60px;
  height: 100px;
  border: solid 4px #111;
  background-color: #111;
  overflow: hidden;
}

.display::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 28px;
  height: 28px;
  transform: translate(-50%, -50%) rotate(45deg);
}

.display::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 30px;
  height: 12px;
  border-top: solid 30px #111;
  border-bottom: solid 30px #111;
  transform: translate(-50%, -50%);
}

.d4::before {
  background-color: #ff0;
  box-shadow: -30px -30px #333,
                0px -30px #ff0,
              -30px   0px #ff0,
                0px  30px #333,
               30px   0px #ff0,
               30px  30px #333;
}

네, 다 됐어요!

데모

감상

나는 수치의 조정에 관해서는 아직 개선할 여지가 있다고 생각한다.
그렇게 말하지만 뭔가 해낸 것 같아 CSS는 끔찍해.

Reference

이 문제에 관하여(CSS를 활용하여 하나의 DIV 요소로 숫자를 만들다), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/n4o847/items/30b0f542f155232bf4d1

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다