2

Нужно как-то указать размер border-top. Ширина блока 300px, border-top должен быть на 150px (50%) Как это сделать?

4 ответа 4

2

Ну а сами то пытались сделать? Как успехи? Ладно, так и быть...

div {
  --basesize: 300px;
  width: var(--basesize);
  border-top-width: calc(.5*var(--basesize));
  border-top-style: solid;
  border-top-color: red;
}
<div></div>

1
  • +) В любом случае - у ТС есть выбор из множества вариантов
    – Coder
    16 окт 2019 в 8:36
2

.main {
        border: 3px solid #000;
        height: 100px;
        width: 300px;
        position:relative;
        padding: 10px
} 
.spoiler {
        position: absolute;
        top:-3px;
        left: -1px;
        width:50%;
        height: 3px;
        background-color:red;
}
<div class="main">
        <div class="spoiler"></div>
        Нужно как-то указать размер border-top. Ширина блока 300px, border-top должен быть на 150px (50%) Как это сделать?
</div>

2
  • 1
    Кстати да, интересно что имел в виду автор вопроса. ))) 16 окт 2019 в 7:48
  • @Andrey Fedorov - ) Да - мысль такая тоже посетила)
    – Coder
    16 окт 2019 в 8:33
1

.yourClass{
  width: 300px;
  height: 100px;
  background: #09f;
  border-top: 150px solid #000; /* вот что тебе нужно */
}
<div class="yourClass"></div>

1

Используй псевдоэлемент с padding'ом:

div {
  width: 100px;
  background: silver;
  min-height: 180px;
}

div::before {
  content: "";
  display: block;
  padding-top: 50%;
  background: blue;
}
<div></div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.