окно с использованием HTML / CSS, но открыто в правом верхнем углу?

Question

У меня есть div, у которого есть свойства стиля, такие как "border-top, left, right, bottom" set. Но я не хочу, чтобы верхняя граница заканчивала прямоугольник (который был бы прямоугольником). Я хочу маленькое (около 2-3px) отверстие в правом верхнем углу (на длинной стороне коробки).

Как это можно сделать?

Я думаю, что в CSS есть свойство, называемое border-top-width, но не существует border-top-length.

Можно ли это сделать с помощью CSS? Любые другие подходы также приветствуются.

Спасибо ...

Answer 1

Я не думаю, что это возможно ... Единственный способ, которым я могу придумать, - это взломать его, создав в нем другой элемент (шириной 1 пиксель, высотой 3 пикселя), выпустить его правильно, а затем выполнить margin-right: -1px .. .

<div style="border:1px solid black; background-color: white;">
    <div id="borderHack"></div>
    Your content here
</div>

И стиль элемента "hack" выглядит так:

#borderHack {
   float: right;
   margin-right: 1px;
   background-color: white; /*This would have to be the same as the background*/
   height: 3px;
   width: 1px;
}

Answer 2

С таким же успехом вы можете попробовать это (относительное + абсолютное позиционирование) с помощью float:

<div style="width:400px;height:300px;border-top:1px solid black; border-right:1px solid black;border-bottom:1px solid black;position:relative;">
    some content here
    <div style="width:2px;height:3px;position:absolute;right:0;background:gray;"></div>
</div>

Answer 3

Вы можете сделать это, используя объяснения по этой ссылке http://www.css3.info/preview/border-image/

В основном вы должны нарисовать прямоугольник без верхних углов и назначить его как border-image

Редактировать: Но это доступно только в CSS3 и не реализовано во многих браузерах, поэтому пока другие ответы дают практическое решение.

Answer 4

Я не верю, что вы можете сделать это только с помощью CSS.

Вы можете добавить внутренний div, который имеет цвет фона того цвета, который вы хотите при открытии. Затем вы должны расположить и изменить размер внутреннего элемента так, чтобы он казался зазором.

Answer 5

Вам нужно будет задать для border-top значение none, а затем поместить еще один DIV в этот контейнер DIV. Затем установите внутреннюю границу DIV и установите ее ширину меньше контейнера.