CSSで作るポイントボックス

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

.border-box{ 
  position: relative; 
  border: solid 3px #333; 
  background-color: #fff; 
  padding: 50px 30px 40px; 
  display: flex; 
  flex-direction: column; 
  height:100%; 
} 
/* 上線を隠す */ 
.border-box{ 
  border-top: none; 
} 
/* 左右の上線 */ 
.border-box{
   background: 
   linear-gradient(#333,#333) left top / calc(50% - 80px) 3px no-repeat, 
   linear-gradient(#333,#333) right top / calc(50% - 80px) 3px no-repeat, 
   #fff; 
} 

.border-box::before{ 
  content: "Point"; 
  position: absolute; 
  top: -18px; 
  left: 40%; 
  transform: translateX(-50%); 
  padding: 0 10px; 
  font-size: 15px; 
  font-weight: bold; 
  font-family: "Montserrat", sans-serif; 
  letter-spacing: 0.05em; 
  color: #333; 
} 

.border-box::after{ 
  content: ""; 
  position: absolute; 
  top: 10px; 
  left: 40%; 
  width: 70px; 
  height: 3px; 
  background: #333; 
  transform: translateX(-10%) rotate(-45deg); 
} 

.point-01{
  position: relative;
}
.point-01::before{ 
  position: absolute;
  content: "01"; 
  font-family: "Montserrat", sans-serif; 
  font-weight: bold;
  top: -60px; 
  left:50%;
  font-size: 40px;
}

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントする

CAPTCHA


目次