如何用HTML&CSS实现三角形Div边框？Bootstrap双Div三角衔接实现

Hey there! Let's break down your two layout requirements step by step — I’ve tackled similar Bootstrap-based design challenges plenty of times, so I’ve got you covered.

For a clean, seamless triangle衔接 (transition) between two horizontal/stacked divs with background images, using CSS clip-path is the most straightforward approach (no extra HTML elements needed, which plays nicely with Bootstrap's utility classes).

Example Code #

HTML (using Bootstrap utilities)

<div class="container-fluid p-0">
  <!-- Top Background Section -->
  <section class="bg-section bg-top">
    <div class="h-100 d-flex align-items-center justify-content-center text-white">
      <h2>Top Section Content</h2>
    </div>
  </section>

  <!-- Bottom Background Section -->
  <section class="bg-section bg-bottom">
    <div class="h-100 d-flex align-items-center justify-content-center text-white">
      <h2>Bottom Section Content</h2>
    </div>
  </section>
</div>

CSS

.bg-section {
  height: 400px; /* Adjust height as needed */
  background-size: cover;
  background-position: center;
  position: relative;
}

/* Top section: Clip a triangular notch at the bottom right */
.bg-top {
  background-image: url('your-top-image-url.jpg');
  clip-path: polygon(0 0, 100% 0, 100% 90%, 85% 100%, 0 100%);
}

/* Bottom section: Clip a matching triangular notch at the top left, then pull it up to overlap */
.bg-bottom {
  background-image: url('your-bottom-image-url.jpg');
  clip-path: polygon(0 0, 15% 10%, 100% 0, 100% 100%, 0 100%);
  margin-top: -2rem; /* Adjust this value to fine-tune the overlap */
}

/* Bootstrap Responsive Adjustment */
@media (max-width: 768px) {
  .bg-top {
    clip-path: polygon(0 0, 100% 0, 100% 95%, 50% 100%, 0 100%);
  }
  .bg-bottom {
    clip-path: polygon(0 0, 50% 5%, 100% 0, 100% 100%, 0 100%);
    margin-top: -1rem;
  }
}

How It Works #

• clip-path lets you define custom shapes for elements without using images. The polygon values control the coordinates of the notch.
• The negative margin-top on the bottom section pulls it up to create a seamless transition with the top section's notch.
• The media query adjusts the notch shape for mobile screens, keeping the design responsive (core to Bootstrap's philosophy).

There are two common use cases here: a fully triangular element with a border, or a rectangular div with a triangular border accent. Here's how to do both:

Option 1: Fully Triangular Element with Border #

We use two overlapping border-based triangles (one for the border, one for the fill) to achieve this effect.

HTML

<div class="triangle-wrapper">
  <div class="triangular-box"></div>
</div>

CSS

.triangle-wrapper {
  position: relative;
  width: 0;
  height: 0;
}

/* Inner fill triangle */
.triangular-box {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid #ffffff; /* Fill color */
  position: relative;
  z-index: 2;
}

/* Outer border triangle (slightly larger than inner) */
.triangular-box::before {
  content: '';
  position: absolute;
  top: -4px;
  left: -54px;
  width: 0;
  height: 0;
  border-left: 54px solid transparent;
  border-right: 54px solid transparent;
  border-bottom: 104px solid #007bff; /* Bootstrap primary border color */
  z-index: 1;
}

Option 2: Rectangle Div with Triangular Border Accent #

If you want a rectangular div with a triangular border (e.g., at the top-right corner), use two pseudo-elements to layer a border triangle and a fill triangle over it.

HTML

<div class="box-with-triangle-border p-4">
  <p>Your content here</p>
</div>

CSS

.box-with-triangle-border {
  width: 300px;
  border: 2px solid #007bff; /* Bootstrap primary border */
  position: relative;
  background-color: #ffffff;
}

/* Outer border triangle */
.box-with-triangle-border::before {
  content: '';
  position: absolute;
  top: -2px;
  right: -2px;
  width: 0;
  height: 0;
  border-top: 20px solid #007bff;
  border-left: 20px solid transparent;
}

/* Inner fill triangle (matches div background to hide the border underneath) */
.box-with-triangle-border::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
  height: 0;
  border-top: 18px solid #ffffff;
  border-left: 18px solid transparent;
}

Hope these solutions fit your Bootstrap project! Feel free to tweak the values (like notch size, triangle dimensions, or colors) to match your reference site's design.

内容的提问来源于stack exchange，提问作者Joshua