Как создать форму треугольника в верхнем правом углу другого div, чтобы он выглядел разделенным рамкой

Я хочу создать форму, как на этом рисунке:

форма

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

Должен ли я «вырезать» левый div, чтобы он оставался серой границей и выглядел отделенным от зеленого треугольника?

Есть ли идеи, как это сделать?

РЕДАКТИРОВАТЬ:

  1. Я использую фиксированную панель навигации на странице, поэтому, когда я прокручиваю, если div равен position:absolute, панель навигации идет за div.
  2. Пространство между зеленым треугольником и остальной частью div должно быть прозрачным, потому что я использую изображение в качестве фона страницы.

html css css-shapes
person Ian J    schedule 30.08.2013    source источник
comment
Проверьте это css-tricks.com/snippets/css/css-triangle   -  person Vivek Vikranth    schedule 30.08.2013
comment
я знаю, как создать треугольник, я создал его, но я не знаю, как сделать так, чтобы он выглядел отделенным от левого div (и левого div, чтобы сохранить его серую рамку)   -  person Ian J    schedule 30.08.2013

Ответы (3)


arrow_upward
73
arrow_downward

Я бы предложил, учитывая следующую разметку:

#box {
    width: 10em;
    height: 6em;
    border: 4px solid #ccc;
    background-color: #fff;
    position: relative;
}

#box::before,
#box::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    border-color: transparent;
    border-style: solid;
}

#box::before {
    border-width: 1.5em;
    border-right-color: #ccc;
    border-top-color: #ccc;
}

#box::after {
    border-radius: 0.4em;
    border-width: 1.35em;
    border-right-color: #0c0;
    border-top-color: #0c0;
}
<div id="box"></div>

person David says reinstate Monica    schedule 30.08.2013
comment
Я думаю, что явная установка z-index (настройка навигации выше, чем у div и треугольника) должна решить первую часть требований, добавленных к вашему вопросу; что касается прозрачности, которая вам нужна (предположительно, вместо серой рамки?), я не думаю, что пока есть какой-либо способ решить эту проблему. Боюсь, тогда я не смогу развить этот ответ, чтобы он был вам полезен =( - person David says reinstate Monica; 30.08.2013
comment
z-index работал отлично .. спасибо! :) Что касается второй проблемы, я мог бы решить ее, если бы я создал фигуру, как на картинке вопроса (левый div, а не треугольник), а затем я мог бы создать отдельно треугольный div и установить поля на минус, чтобы быть вне левого div.. но есть ли идея, как я могу создать форму, подобную левому div? img43.imageshack.us/img43/1319/kkan.png это форма, которую я хотел бы создать, если это возможно. - person Ian J; 30.08.2013
comment
как я могу сделать треугольник более глубоким? так что он идет больше по диагонали в нижний левый угол - person user2472368; 28.02.2017

arrow_upward
9
arrow_downward

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

HTML

<div class="container">
    <div class="inner-triangle"></div>
    <div class="outer-triangle"></div>
</div>

CSS

.container{
    border: 2px solid gray;
    position: relative;
    height: 100px;
}

.inner-triangle{
    border-left: 20px solid transparent;
    border-right: 20px solid green;
    border-bottom: 20px solid transparent;
    height: 0;
    width: 0;
    position: absolute;
    right: 0px;
    z-index: 2;
}

.outer-triangle{
    border-left: 22px solid transparent;
    border-right: 22px solid gray;
    border-bottom: 22px solid transparent;
    height: 0;
    width: 0;
    position: absolute;
    right: 0px;
    z-index: 1;
}

JS Fiddle: http://jsfiddle.net/u8euZ/1

person Kevin Bowersox    schedule 30.08.2013

arrow_upward
6
arrow_downward

Вы можете использовать псевдоэлемент поворота в сочетании с overflow:hidden на родительском элементе.

Отсюда вы можете расположить псевдо в правом верхнем углу, используя position:absolute, и все будет готово!

div {
  height: 250px;
  width: 300px;
  background: lightgray;
  border-radius: 10px;
  border: 5px solid dimgray;
  position: relative;
  overflow: hidden;
  margin: 30px auto;
}
div:before {
  content: "";
  position: absolute;
  top: -60px;
  right: -60px;
  height: 100px;
  width: 100px;
  background: green;
  border: 5px solid dimgray;
  transform: rotate(45deg);
}

/***********FOR DEMO ONLY*******************/


html, body {
    margin:0;
    padding:0;height:100%;
    vertical-align:top;overflow:hidden;
    background: rgb(79, 79, 79);
    background: -moz-radial-gradient(center, ellipse cover, rgba(79, 79, 79, 1) 0%, rgba(34, 34, 34, 1) 100%);
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(79, 79, 79, 1)), color-stop(100%, rgba(34, 34, 34, 1)));
    background: -webkit-radial-gradient(center, ellipse cover, rgba(79, 79, 79, 1) 0%, rgba(34, 34, 34, 1) 100%);
    background: -o-radial-gradient(center, ellipse cover, rgba(79, 79, 79, 1) 0%, rgba(34, 34, 34, 1) 100%);
    background: -ms-radial-gradient(center, ellipse cover, rgba(79, 79, 79, 1) 0%, rgba(34, 34, 34, 1) 100%);
    background: radial-gradient(ellipse at center, rgba(79, 79, 79, 1) 0%, rgba(34, 34, 34, 1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4f4f4f', endColorstr='#222222', GradientType=1);
}
<div></div>

person jbutler483    schedule 21.05.2015