本文へスキップ

CRG-13 — DIVIDERS

区切り線21点 在庫あり

セクションの継ぎ目に効く、hrのあしらい集。 すべて画像不使用・クラス接頭辞 cg- 付きで、既存サイトに安全に積み込めます。

CRG-13-001

フェードグラデ線Fading Line

.cg-dv-fade {
  width: 240px;
  height: 2px;
  border: none;
  background: linear-gradient(90deg, transparent, #1B1A17, transparent);
}
<hr class="cg-dv-fade">
GROSS WT. 158 B ORIGINAL
CRG-13-002

センターダイヤ線Center Diamond

.cg-dv-diamond {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 240px;
}
.cg-dv-diamond::before,
.cg-dv-diamond::after {
  content: "";
  flex: 1;
  height: 2px;
  background: #C89B6C;
}
.cg-dv-diamond i {
  width: 10px;
  height: 10px;
  background: #C89B6C;
  transform: rotate(45deg);
}
<div class="cg-dv-diamond" role="separator"><i></i></div>
GROSS WT. 361 B ORIGINAL
CRG-13-003

二重線Double Rule

.cg-dv-double {
  width: 240px;
  border: none;
  border-top: 1px solid #1B1A17;
  border-bottom: 1px solid #1B1A17;
  height: 4px;
}
<hr class="cg-dv-double">
GROSS WT. 158 B ORIGINAL
CRG-13-004

ジグザグ線Zigzag

.cg-dv-zig {
  width: 240px;
  height: 12px;
  background:
    linear-gradient(135deg, #E8590C 25%, transparent 25%) 0 0 / 16px 16px,
    linear-gradient(225deg, #E8590C 25%, transparent 25%) 0 0 / 16px 16px;
  background-repeat: repeat-x;
}
<div class="cg-dv-zig" role="separator"></div>
GROSS WT. 287 B ORIGINAL
CRG-13-005

3点リーダー区切りThree Dots

.cg-dv-dots {
  display: flex;
  justify-content: center;
  gap: 14px;
}
.cg-dv-dots i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #B5AF9F;
}
.cg-dv-dots i:nth-child(2) { background: #E8590C; }
<div class="cg-dv-dots" role="separator"><i></i><i></i><i></i></div>
GROSS WT. 284 B ORIGINAL
CRG-13-006

ラベル入り区切り線Labeled Divider

.cg-dv-label {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 250px;
  font-size: 12.5px;
  font-weight: 700;
  color: #8B857A;
}
.cg-dv-label::before,
.cg-dv-label::after {
  content: "";
  flex: 1;
  height: 1.5px;
  background: #C9C5BA;
}
<div class="cg-dv-label" role="separator">または</div>
GROSS WT. 313 B ORIGINAL
CRG-13-007

波線区切りWavy Line

.cg-dv-wave {
  width: 240px;
  height: 10px;
  background: radial-gradient(circle 5px at 5px -1px, transparent 4px, #3A5A78 4px 5.5px, transparent 5.5px) 0 0 / 20px 10px,
    radial-gradient(circle 5px at 5px 11px, transparent 4px, #3A5A78 4px 5.5px, transparent 5.5px) 10px 0 / 20px 10px;
  background-repeat: repeat-x;
}
<div class="cg-dv-wave" role="separator"></div>
GROSS WT. 370 B ORIGINAL
CRG-13-008

バーコード区切りBarcode

.cg-dv-barcode {
  width: 240px;
  height: 18px;
  background: repeating-linear-gradient(
    90deg,
    #1B1A17 0 2px, transparent 2px 5px,
    #1B1A17 5px 6px, transparent 6px 11px,
    #1B1A17 11px 14px, transparent 14px 17px
  );
}
<div class="cg-dv-barcode" role="separator"></div>
GROSS WT. 285 B ORIGINAL
CRG-13-009

ミシン目区切りPerforation

.cg-dv-perf {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 250px;
  color: #8B857A;
}
.cg-dv-perf::after {
  content: "";
  flex: 1;
  border-top: 2px dashed #B5AF9F;
}
<div class="cg-dv-perf" role="separator"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><circle cx="6" cy="6" r="3"/><circle cx="6" cy="18" r="3"/><path d="M20 4 8.12 15.88M14.47 14.48 20 20M8.12 8.12 12 12"/></svg></div>
GROSS WT. 500 B ORIGINAL
CRG-13-010
上のセクション
下のセクション

斜めセクション境界Angled Section

.cg-dv-angle { width: 250px; font-size: 12px; font-weight: 700; text-align: center; }
.cg-dv-angle .a {
  padding: 20px 0 30px;
  color: #fff;
  background: #3A5A78;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 16px), 0 100%);
}
.cg-dv-angle .b {
  padding: 24px 0 18px;
  background: #EFECE4;
  margin-top: -14px;
}
<div class="cg-dv-angle"><div class="a">上のセクション</div><div class="b">下のセクション</div></div>
GROSS WT. 437 B ORIGINAL
CRG-13-011

太グラデバーBold Gradient Bar

.cg-dv-bold {
  width: 240px;
  height: 8px;
  border-radius: 6px;
  background: linear-gradient(90deg, #E8590C, #F2B707);
}
<div class="cg-dv-bold" role="separator"></div>
GROSS WT. 171 B ORIGINAL
CRG-13-012

ハザードテープ区切りHazard Tape

.cg-dv-hazard {
  width: 240px;
  height: 14px;
  background: repeating-linear-gradient(
    -45deg,
    #F2B707 0 12px,
    #1B1A17 12px 24px
  );
  border-top: 2px solid #1B1A17;
  border-bottom: 2px solid #1B1A17;
}
<div class="cg-dv-hazard" role="separator"></div>
GROSS WT. 267 B ORIGINAL
CRG-13-013

流れるテキスト帯Marquee Strip

/* アワード系サイト定番の、セクション境界を流れる帯 */
.cg-dv-marquee {
  width: 260px;
  overflow: hidden;
  padding: 10px 0;
  background: #1B1A17;
  transform: rotate(-1.5deg);
}
.cg-dv-marquee-in {
  display: flex;
  width: max-content;
  animation: cg-dv-marquee-run 9s linear infinite;
}
.cg-dv-marquee-in span {
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .14em;
  color: #F2B707;
  white-space: nowrap;
}
@keyframes cg-dv-marquee-run {
  to { transform: translateX(-50%); }
}
<div class="cg-dv-marquee" aria-hidden="true"><div class="cg-dv-marquee-in"><span>WORKS ◆ ABOUT ◆ CONTACT ◆ NEWS ◆ </span><span>WORKS ◆ ABOUT ◆ CONTACT ◆ NEWS ◆ </span></div></div>
GROSS WT. 716 B ORIGINAL
CRG-13-014

流れる破線Flowing Dashes

.cg-dv-dashflow {
  width: 240px;
  height: 3px;
  background: repeating-linear-gradient(
    90deg,
    #E8590C 0 14px,
    transparent 14px 26px
  );
  animation: cg-dv-dashflow-run 1s linear infinite;
}
@keyframes cg-dv-dashflow-run {
  to { background-position: 26px 0; }
}
<div class="cg-dv-dashflow" role="separator"></div>
GROSS WT. 328 B ORIGINAL
CRG-13-015

鼓動するセンタードットPulsing Center

.cg-dv-pulse {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 240px;
}
.cg-dv-pulse::before,
.cg-dv-pulse::after {
  content: "";
  flex: 1;
  height: 2px;
  background: #C9C5BA;
}
.cg-dv-pulse i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #E8590C;
  animation: cg-dv-pulse-beat 1.6s ease-out infinite;
}
@keyframes cg-dv-pulse-beat {
  0% { box-shadow: 0 0 0 0 rgba(232, 89, 12, .5); }
  70%, 100% { box-shadow: 0 0 0 10px rgba(232, 89, 12, 0); }
}
<div class="cg-dv-pulse" role="separator"><i></i></div>
GROSS WT. 544 B ORIGINAL
CRG-13-016

グラデが流れる線Gradient Stream

.cg-dv-stream {
  width: 240px;
  height: 4px;
  border-radius: 4px;
  background: linear-gradient(90deg, #E8590C, #F2B707, #3A5A78, #C2426B, #E8590C);
  background-size: 250% 100%;
  animation: cg-dv-stream-run 3s linear infinite;
}
@keyframes cg-dv-stream-run {
  to { background-position: 250% 0; }
}
<div class="cg-dv-stream" role="separator"></div>
GROSS WT. 352 B ORIGINAL
CRG-13-017

中央から伸びる線Grow from Center

.cg-dv-growline {
  width: 240px;
  height: 3px;
  background: #1B1A17;
  transform-origin: center;
  animation: cg-dv-growline-in 2.8s cubic-bezier(.4, 0, .2, 1) infinite;
}
@keyframes cg-dv-growline-in {
  0% { transform: scaleX(0); }
  35%, 80% { transform: scaleX(1); }
  100% { transform: scaleX(0); }
}
<div class="cg-dv-growline" role="separator"></div>
GROSS WT. 359 B ORIGINAL
CRG-13-018

光が走る線Scanning Light

.cg-dv-scan {
  position: relative;
  width: 240px;
  height: 2px;
  background: #D9D5CB;
  overflow: hidden;
}
.cg-dv-scan::before {
  content: "";
  position: absolute;
  top: 0;
  left: -30%;
  width: 30%;
  height: 100%;
  background: linear-gradient(90deg, transparent, #E8590C, transparent);
  animation: cg-dv-scan-run 1.8s ease-in-out infinite;
}
@keyframes cg-dv-scan-run {
  to { left: 100%; }
}
<div class="cg-dv-scan" role="separator"></div>
GROSS WT. 452 B ORIGINAL
CRG-13-019

うねうね進むドット列Caterpillar Dots

.cg-dv-worm {
  display: flex;
  justify-content: center;
  gap: 12px;
}
.cg-dv-worm i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #C89B6C;
  animation: cg-dv-worm-move 1.5s ease-in-out infinite;
}
.cg-dv-worm i:nth-child(2) { animation-delay: .12s; }
.cg-dv-worm i:nth-child(3) { animation-delay: .24s; background: #E8590C; }
.cg-dv-worm i:nth-child(4) { animation-delay: .36s; }
.cg-dv-worm i:nth-child(5) { animation-delay: .48s; }
@keyframes cg-dv-worm-move {
  0%, 60%, 100% { transform: translateY(0); }
  30% { transform: translateY(-7px); }
}
<div class="cg-dv-worm" role="separator"><i></i><i></i><i></i><i></i><i></i></div>
GROSS WT. 655 B ORIGINAL
CRG-13-021

慣性バウンドドット区切り線Elastic Bounce Divider

.cg-dv-elastic {
  position: relative;
  width: 240px;
  height: 2px;
  background: #D9D5CB;
}
.cg-dv-elastic-dot {
  position: absolute;
  top: 50%;
  left: 0;
  width: 10px;
  height: 10px;
  margin-top: -5px;
  border-radius: 50%;
  background: #E8590C;
  box-shadow: 0 0 0 4px rgba(232, 89, 12, .15);
  animation: cg-dv-elastic-move 2.6s cubic-bezier(.34, 1.56, .64, 1) infinite alternate;
}
@keyframes cg-dv-elastic-move {
  0% { left: 0; }
  100% { left: calc(100% - 10px); }
}
<div class="cg-dv-elastic" role="separator"><span class="cg-dv-elastic-dot"></span></div>
GROSS WT. 572 B ORIGINAL