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

当サイトは広告を含んでいます。

2026-05-13

タイトルタイトル

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

.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;
}