Как сделать заголовок с уголками

Question

Всем привет Не могли бы подсказать как без костылей правильно сверстать такой элемент? С помощью чистого html/css

Answer 1

Предложу такой, достаточно простой вариант. Толщина уголка регулируется при помощи значений свойства border, длина и высота - при помощи значений свойств width, height

.container {
  position: relative;
  width: 300px;
  height: 70px;
  margin: 20px auto;
}

h1 {
  padding: 15px;
  text-align: center;
}

.btl {
  position: absolute;
  top: 0;
  left: 0;
  border-left: 3px solid gold;
  border-top: 3px solid gold;
  width: 30px;
  height: 30px;
}

.bbr {
  position: absolute;
  bottom: 0;
  right: 0;
  border-right: 3px solid gold;
  border-bottom: 3px solid gold;
  width: 30px;
  height: 30px;
}

<div class="container">
  <div class="btl"></div>
  <h1>ОБРАЗОВАНИЕ</h1>
  <div class="bbr"></div>
</div>

Answer 2

            .mane_text{
                text-align: center;
                font-family: Arial;
                margin: 50px 0px 0px 0px;
                letter-spacing: 3px;
                color: black;
                font-size: 35px;
                text-transform: uppercase;
                user-select: text;
            }
            #block_1{
                width: 2%;
                height: 30px;
                border-left: 7px solid #FBD66A;
                border-top: 7px solid #FBD66A;
                color: white;
                border-top-right-radius: 5px;
                border-bottom-left-radius: 5px;
                position: relative;
                left: 580px;
                bottom: 53px;
            }
            #block_2{
                width: 2%;
                height: 30px;
                border-left: 7px solid #FBD66A;
                border-top: 7px solid #FBD66A;
                color: white;
                border-top-right-radius: 5px;
                border-bottom-left-radius: 5px;
                position: relative;
                left: 890px;
                bottom: 53px;
                transform: scaleY(-1);
                transform: scaleX(-1);
                transform: rotate(180deg);
            }
            #block_parent{
              position: relative;
              left: -440px;
              user-select: none;
            }

    <h1 class="mane_text">Образования</h1>
    <div id="block_parent">
      <div id="block_1">.</div>
      <div id="block_2">.</div>
    </div>

Вот ещё один вариант реализации углов для текста, но также добавил border-radius

Answer 3

h1 {
  --bw: .25em;
  --bl: 1em;

  /* Отрежу лишний пиксель чтобч не было артефактов сглаживания */
  --bwex: calc(var(--bw) + 1px);

  text-transform: uppercase;
  width: fit-content;
  margin-inline: auto;
  border: var(--bw) solid orange;
  padding: .25em .5em;
  clip-path: polygon(
    0 0,
    var(--bl) 0,
    var(--bl) var(--bwex),
    calc(100% - var(--bwex)) var(--bwex),
    calc(100% - var(--bwex)) calc(100% - var(--bl)),
    100% calc(100% - var(--bl)),
    100% 100%,
    calc(100% - var(--bl)) 100%,
    calc(100% - var(--bl)) calc(100% - var(--bwex)),
    var(--bwex) calc(100% - var(--bwex)),
    var(--bwex) var(--bl),
    0 var(--bl)
  );
}

<h1>Образование</h1>

Answer 4

h1 {
  text-transform: uppercase;
  width: fit-content;
  margin-inline: auto;
  padding: .5em .75em;
  position: relative;
}

h1::before, h1::after {
  content: "";
  position: absolute;
  width: 1em;
  aspect-ratio: 1;
  border: .25em solid orange;
  position: absolute;
  pointer-events: none;
}

h1::before {
  left: 0;
  top: 0;
  border-right: none;
  border-bottom: none; 
}

h1::after {
  right: 0;
  bottom: 0;
  border-left: none;
  border-top: none; 
}

<h1>Образование</h1>

Answer 5

Хоть на вопрос уже ответили, предложу свой вариант:

:root {
  --corner-size: .8em;/* размер декоративного элемента */
  --corner-weight: .15em; /* толщина линии декоративного элемента */
}

h1 {
  text-transform: uppercase;
  padding: 0.2em 0.5em;
  background: 
    no-repeat left top/var(--corner-size, 1em) var(--corner-weight, 8px) 
    linear-gradient( orange var(--corner-weight, 8px),
    transparent var(--corner-weight, 8px)),
    no-repeat left top/var(--corner-weight, 8px) 
    var(--corner-size, 1em)
    linear-gradient( 90deg, orange var(--corner-weight, 8px),
    transparent var(--corner-weight, 8px)),
    no-repeat right bottom/var(--corner-size, 1em) 
    var(--corner-weight, 8px)
    linear-gradient( transparent calc(100% - var(--corner-weight, 8px)),
    orange calc(100% - var(--corner-weight, 8px))),
    no-repeat right bottom/var(--corner-weight, 8px)
    var(--corner-size, 1em)
    linear-gradient( 90deg, transparent calc(100% - var(--corner-weight, 8px)),
    orange calc(100% - var(--corner-weight, 8px)));
}

/* для красоты */
body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100dvh;
  font: normal bold clamp(1rem, 0.891rem + 0.479vw, 1.25rem)/1.4 sans-serif;
}

<h1>Образование</h1>

БЛОГ НА HUSL

Как сделать заголовок с уголками

Ответы (5 шт):