如何在兩個div之間創建一個三角形？CSS

我想創建一個像下面這樣的三角形：

但是，我不太確定如何獲得 div 之間的三角形。

這是我目前擁有的代碼：

.container {
  display: flex;
  flex-direction: row;
  align-content: center;
}
.box {
  height: 50px;
  width: 50%;
  background-color: #ddd;
  border: 1px solid red;
}

<div class="container">
  <div class="box"></div>
  <div class="box"></div>
</div>

uj5u.com熱心網友回復：

肯定有更好的方法，但我通常會按照以下方式做一些事情：

.container {
  display: flex;
  flex-direction: row;
  align-content: center;
}

.box {
  height: 50px;
  width: 50%;
  background-color: #ddd;
  border: 1px solid red;
}

.triangle {
  position: relative;
}

.triangle::before {
  content: "";
  width: 10px;
  height: 10px;
  border-top: 2px solid red;
  border-right: 2px solid red;
  background: #ddd;
  transform: rotate(45deg);
  position: absolute;
  top: 50%;
  right: -7px;
  margin-top: -5px;
}

<div class="container">
  <div class="box triangle"></div>
  <div class="box"></div>
</div>

uj5u.com熱心網友回復：

HTML：

  <div class="box"> 
  <div class='arrow-right'></div>
  </div>
  
   <div class="box"> 
  <div class='arrow-right'></div>
  </div>
  
</div>

CSS：

.container {
  display: flex;
  flex-direction: row;
  align-content: center;
}
.box {
  height: 50px;
  width: 50%;
  background-color: #ddd;
  border: 1px solid red;
  position:relative;
}
.arrow-right{
  position:absolute;
 right:-.6rem;
 z-index:2;
 top:50%;
 transform:translateY(-50%);
     width: 0.6rem;
    height: 1rem;
    
}
 .arrow-right::after{
    z-index:3;
    position: absolute;
    display: block;
    content: "";
    border-color: transparent;
    border-style: solid;
    border-width: 0.6rem 0 0.6rem 0.6rem;
    right: 2px;
    border-left-color: #ddd;
     overflow:hidden;
 }
 .arrow-right::before{
    right: 0;
    z-index:3;
    position: absolute;
    display: block;
    content: "";
    border-color: transparent;
    border-style: solid;
    border-width: 0.6rem 0 0.6rem 0.6rem;
    border-left-color: red;     
 }

提琴手

uj5u.com熱心網友回復：

您可以使用此 css 屬性來獲取所需的結構。

.container {
  display: flex;
  flex-direction: row;
  align-content: center;
}
.box {
  height: 50px;
  width: 50%;
  background-color: #ddd;
  border: 1px solid red;
  position:relative;
}
.box-arrow{
  position:absolute;
 right:-.6rem;
 z-index:2;
 top:50%;
 transform:translateY(-50%);
     width: 0.6rem;
    height: 1rem;
    
}
.box-arrow::after{
    z-index:3;
    position: absolute;
    display: block;
    content: "";
    border-color: transparent;
    border-style: solid;
    border-width: 0.6rem 0 0.6rem 0.6rem;
    right: 2px;
    border-left-color: #ddd;
     overflow:hidden;
 }
  .box-arrow::before{
    right: 0;
    z-index:3;
    position: absolute;
    display: block;
    content: "";
    border-color: transparent;
    border-style: solid;
    border-width: 0.6rem 0 0.6rem 0.6rem;
    border-left-color: red;     
 } 

<div class="container">
<div class="box"> 
  <div class='box-arrow'></div>
  </div>
</div>

標籤：html css

上一篇：如何從添加表單樣式中添加輸入欄位的樣式？

下一篇：如何顯示與1個表不同的表？就像每張桌子都有唯一的代碼