Треугольная граница в DIV

Question

У меня есть div (ну, на самом деле это <th>, но я не думаю, что это актуально) с некоторым содержимым динамического размера в нем.

Я хотел бы поместить граничный треугольник в родительский div, который заполняет его (ширина такая же, как у div, высота такая же, как у div).

С фиксированным размером родительского div я могу сделать это, как показано ниже. Возможно ли это сделать без фиксированного размера родительского div? Я использую VueJs, если это нужно

.crossedleft {
    background: 
       linear-gradient(to top left,
           rgba(0,0,0,0) 0%,
           rgba(0,0,0,0) calc(50% - 0.8px),
           rgba(0,0,0,1) 50%,
           rgba(0,0,0,0) calc(50% + 0.8px),
           rgba(0,0,0,0) 100%)
}

.crossedright {
    background: 
       linear-gradient(to top right,
           rgba(0,0,0,0) 0%,
           rgba(0,0,0,0) calc(50% - 0.8px),
           rgba(0,0,0,1) 50%,
           rgba(0,0,0,0) calc(50% + 0.8px),
           rgba(0,0,0,0) 100%)
}

<div style="height:50px;width:100px">
<div class="crossedleft" style="position:absolute; height:50px;width:50px">
<div class="crossedright" style="position:absolute; height:50px;width:50px;left:50px">
</div>
<pre>

    content

</pre>
</div>

html css

2

foldone 14 Янв 2021 в 01:18

Answer 1

Вместо этого примените оба фона к div:

.tri {
    background: 
       linear-gradient(to top left,
           rgba(0,0,0,0) 0%,
           rgba(0,0,0,0) calc(50% - 0.8px),
           rgba(0,0,0,1) 50%,
           rgba(0,0,0,0) calc(50% + 0.8px),
           rgba(0,0,0,0) 100%) left,  /* one on the left */
       linear-gradient(to top right,
           rgba(0,0,0,0) 0%,
           rgba(0,0,0,0) calc(50% - 0.8px),
           rgba(0,0,0,1) 50%,
           rgba(0,0,0,0) calc(50% + 0.8px),
           rgba(0,0,0,0) 100%) right; /* the other the right */
    background-size:50% 100%; /* both width:50% and height:100% */
    background-repeat:no-repeat;
}

<div style="width:100px" class="tri">
<pre>

    content

</pre>
</div>

Вы можете немного упростить код, как показано ниже:

.tri {
    --g:rgba(0,0,0,0) calc(50% - 0.8px),
        rgba(0,0,0,1) 50%,
        rgba(0,0,0,0) calc(50% + 0.8px);
    background: 
       linear-gradient(to top left,  var(--g)),
       linear-gradient(to top right, var(--g)) 100%; 
    background-size:50% 100%;
    background-repeat:no-repeat;
}

<div style="width:100px" class="tri">
<pre>

    content

</pre>
</div>

3

Temani Afif 13 Янв 2021 в 22:58

Answer 2

Во-первых, вы можете полностью адаптировать свой подход, работая с процентами. Вы даже можете удалить все лишние элементы, используя псевдоэлементы ::before и ::after, например:

.triangle {
  position: relative;
  display: inline-block;
  padding: 1em;
  border-bottom: 1px black solid;
}

.triangle::before,
.triangle::after {
  content: "";
  display: block;
  width: 50%;
  height: 100%;
  position: absolute;
  top: 0;
}

.triangle::before {
  left: 0;
  background: linear-gradient(to top left, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) calc(50% - 0.8px), rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 0) calc(50% + 0.8px), rgba(0, 0, 0, 0) 100%)
}

.triangle::after {
  right: 0;
  background: linear-gradient(to top right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) calc(50% - 0.8px), rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 0) calc(50% + 0.8px), rgba(0, 0, 0, 0) 100%)
}

<div class="triangle">Short</div>
<div class="triangle">This is a very long sentence</div>

Однако в этом случае вам может быть лучше использовать фон SVG, поскольку он может содержать любую форму, которая вам нравится. С простой формой, такой как треугольник, вы даже можете встроить ее в свой CSS:

.triangle {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.0' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='50,1 98,98 1,98' fill='none' stroke='black' stroke-width='1px' vector-effect='non-scaling-stroke' /%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: stretch;
  display: inline-block;
  padding: 1em;
}

<div class="triangle">Short</div>
<div class="triangle">This is a very long sentence</div>

SVG в этом примере -

<svg xmlns="http://www.w3.org/2000/svg" version="1.0" viewBox="0 0 100 100" preserveAspectRatio="none">
  <polygon points="50,1 99,99 1,99" fill="none" stroke="black"  stroke-width="1px" vector-effect="non-scaling-stroke" />
</svg>

0

soimon 13 Янв 2021 в 23:05

Треугольная граница в DIV

2 ответа

Похожие вопросы

Новые вопросы

html