Чистые вкладки CSS: как добавить контурную границу границы на вкладках линейного градиента CSS3? [dубликат]

Я хочу «вырезать» верхний левый угол div, например, если вы сгибали угол страницы вниз.

Я хотел бы сделать это в чистом CSS, есть ли какие-либо методы?

45
задан 30 July 2014 в 00:40

11 ответов

Если вам нужна диагональная граница вместо диагонального угла, вы можете складывать 2 divs с каждым псевдоэлементом:

DEMO

http://codepen.io/remcokalf / pen / BNxLMJ

.container {
  padding: 100px 200px;
  overflow: hidden;
}

div.diagonal {
  background: #da1d00;
  color: #fff;
  font-family: Arial, Helvetica, sans-serif;
  width: 300px;
  height: 300px;
  padding: 70px;
  position: relative;
  margin: 30px;
  float: left;
}

div.diagonal2 {
  background: #da1d00;
  color: #fff;
  font-family: Arial, Helvetica, sans-serif;
  width: 300px;
  height: 300px;
  padding: 70px;
  position: relative;
  margin: 30px;
  background: #da1d00 url(http://www.remcokalf.nl/background.jpg) left top;
  background-size: cover;
  float: left;
}

div.diagonal3 {
  background: #da1d00;
  color: #da1d00;
  font-family: Arial, Helvetica, sans-serif;
  width: 432px;
  height: 432px;
  padding: 4px;
  position: relative;
  margin: 30px;
  float: left;
}

div.inside {
  background: #fff;
  color: #da1d00;
  font-family: Arial, Helvetica, sans-serif;
  width: 292px;
  height: 292px;
  padding: 70px;
  position: relative;
}

div.diagonal:before,
div.diagonal2:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  border-top: 80px solid #fff;
  border-right: 80px solid transparent;
  width: 0;
}

div.diagonal3:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  border-top: 80px solid #da1d00;
  border-right: 80px solid transparent;
  width: 0;
  z-index: 1;
}

div.inside:before {
  content: '';
  position: absolute;
  top: -4px;
  left: -4px;
  border-top: 74px solid #fff;
  border-right: 74px solid transparent;
  width: 0;
  z-index: 2;
}

h2 {
  font-size: 30px;
  line-height: 1.3em;
  margin-bottom: 1em;
  position: relative;
  z-index: 1000;
}

p {
  font-size: 16px;
  line-height: 1.6em;
  margin-bottom: 1.8em;
}

#grey {
  width: 100%;
  height: 400px;
  background: #ccc;
  position: relative;
  margin-top: 100px;
}

#grey:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  border-top: 80px solid #fff;
  border-right: 80px solid #ccc;
  width: 400px;
}
<div id="grey"></div>
<div class="container">
  <div class="diagonal">
    <h2>Header title</h2>
    <p>Yes a CSS diagonal corner is possible</p>
  </div>
  <div class="diagonal2">
    <h2>Header title</h2>
    <p>Yes a CSS diagonal corner with background image is possible</p>
  </div>
  <div class="diagonal3">
    <div class="inside">
      <h2>Header title</h2>
      <p>Yes a CSS diagonal border is even possible with an extra div</p>
    </div>
  </div>
</div>

7
ответ дан 15 August 2018 в 15:45

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

div {
    height: 300px;
    background: red;
    position: relative;
}

div:before {
    content: '';
    position: absolute;
    top: 0; right: 0;
    border-top: 80px solid white;
    border-left: 80px solid blue;
    width: 0;
}
0
ответ дан 15 August 2018 в 15:45

С небольшим редактированием кода Джозефа элемент не требует сплошного фона:

div {
    height: 300px;
    background: url('http://images2.layoutsparks.com/1/190037/serene-nature-scenery-blue.jpg');
    position: relative;
}

div:before {
    content: '';
    position: absolute;
    top: 0; right: 0;
    border-top: 80px solid white;
    border-left: 80px solid rgba(0,0,0,0);
    width: 0;
}

http://jsfiddle.net/2bZAW/1921/

Это использование «rgba (0,0,0,0)» позволяет внутреннему «углу» быть невидимым.

Вы также можете редактировать 4-й параметр «a», где rgba (0, 0,0,0) , чтобы иметь тень для большего эффекта «сложенного угла»:

http://jsfiddle.net/2bZAW/1921/ (с тенью)

ПРИМЕЧАНИЕ. Значения цвета RGBA поддерживаются в IE9 +, Firefox 3+, Chrome, Safari и в Opera 10 +.

3
ответ дан 15 August 2018 в 15:45
  • 1
    Это очень умно – smonff 11 January 2014 в 21:14
  • 2
    используйте слово «прозрачный» вместо rgba (0,0,0,0), и вы получите большую поддержку в IE7 + – rob_james 19 February 2014 в 16:57
  • 3
    Однако родительский элемент все же должен быть сплошным цветом (например, в вашем примере он сплошной белый), что, по моему мнению, является ограничением, о котором говорил Джозеф. Ответ @ web-tiki обрабатывает более сложные фоны фантастически. – tobek 19 April 2015 в 10:26

Вот еще один подход, использующий CSS transform: skew(45deg) для создания эффекта углового угла. Сама форма включает три элемента (1 реальный и 2 псевдоэлемента) следующим образом:

Элемент основного контейнера div имеет overflow: hidden и создает левую границу. Псевдоэлемент :before, который составляет 20% высоты родительского контейнера и имеет привязку к нему. Этот элемент создает границу на верхней и наклонной границе с правой стороны. Псевдоэлемент :after, который составляет 80% высоты родителя (в основном, оставшаяся высота) и создает нижнюю границу, оставшуюся часть правой границы.

Полученный результат реагирует, создает прозрачный разрез сверху и поддерживает прозрачные фоны.

div {
  position: relative;
  height: 100px;
  width: 200px;
  border-left: 2px solid beige;
  overflow: hidden;
}
div:after,
div:before {
  position: absolute;
  content: '';
  width: calc(100% - 2px);
  left: 0px;
  z-index: -1;
}
div:before {
  height: 20%;
  top: 0px;
  border: 2px solid beige;
  border-width: 2px 3px 0px 0px;
  transform: skew(45deg);
  transform-origin: right bottom;
}
div:after {
  height: calc(80% - 4px);
  bottom: 0px;
  border: 2px solid beige;
  border-width: 0px 2px 2px 0px;
}
.filled:before, .filled:after {
  background-color: beige;
}

/* Just for demo */

div {
  float: left;
  color: beige;
  padding: 10px;
  transition: all 1s;
  margin: 10px;
}
div:hover {
  height: 200px;
  width: 300px;
}
div.filled{
  color: black;
}
body{
 background-image: radial-gradient(circle, #3F9CBA 0%, #153346 100%);
}
<div class="cut-corner">Some content</div>
<div class="cut-corner filled">Some content</div>

Ниже приведен другой способ создания эффекта углового угла с использованием фоновых изображений linear-gradient. Используется комбинация из 3 градиентных изображений (приведенная ниже):

Элемент основного контейнера div имеет overflow: hidden и создает левую границу. Один линейный градиент для обеспечения сплошной цвет слева от треугольника, который вызывает эффект разреза. Градиент используется, даже если он создает сплошной цвет, потому что мы можем контролировать размер, положение фона только при использовании изображений или градиентов. Этот градиент расположен на -25px по оси X (в основном это означает, что конец будет до места, где разрез присутствует). Псевдоэлемент :before, который составляет 20% высоты родительского контейнера и имеет привязку к нему.

Полученный результат реагирует, производит прозрачный разрез и не требует никаких дополнительных элементов (реальных или псевдо). Недостатком является то, что этот подход будет работать только тогда, когда фон (заполнение) является сплошным цветом, и очень сложно создавать границы (но все еще возможно, как видно из фрагмента).

div {
  position: relative;
  height: 100px;
  width: 200px;
  border-left: 2px solid beige;
  overflow: hidden;
}
div:after,
div:before {
  position: absolute;
  content: '';
  width: calc(100% - 2px);
  left: 0px;
  z-index: -1;
}
div:before {
  height: 20%;
  top: 0px;
  border: 2px solid beige;
  border-width: 2px 3px 0px 0px;
  transform: skew(45deg);
  transform-origin: right bottom;
}
div:after {
  height: calc(80% - 4px);
  bottom: 0px;
  border: 2px solid beige;
  border-width: 0px 2px 2px 0px;
}
.filled:before, .filled:after {
  background-color: beige;
}

/* Just for demo */

div {
  float: left;
  color: beige;
  padding: 10px;
  transition: all 1s;
  margin: 10px;
}
div:hover {
  height: 200px;
  width: 300px;
}
div.filled{
  color: black;
}
body{
 background-image: radial-gradient(circle, #3F9CBA 0%, #153346 100%);
}
<div class="cut-corner">Some content</div>
<div class="cut-corner filled">Some content</div>

13
ответ дан 15 August 2018 в 15:45

Согласно решению линейного градиента Гарри (ответил 14 октября 15:15 в 9:55), в нем говорится, что фон непрозрачности невозможен, я пробовал его и да, это не так.

Но! Я нашел обходное решение. Нет, это не супер оптимизировано, но это сработало. Итак, вот мое решение. Поскольку Гарри не использует псевдоэлемент, мы можем достичь этого, создав его.

Установите положение относительно контейнера и создайте псевдоэлемент с теми же свойствами линейного градиента. Другими словами, просто клонируйте его. Затем поставьте прозрачный фон для контейнера и скажем черный фон для клона. Поместите на него абсолютную позицию, z-индекс -1 и значение непрозрачности (т.е. 50%). Он выполнит эту работу. Опять же это обходной путь, и он не идеален, но он работает отлично.

.cut-corner {
    position: relative;
    color: white;
    background-repeat: no-repeat;
    background-image: linear-gradient(white, white), linear-gradient(white, white), linear-gradient(white, white), linear-gradient(white, white), linear-gradient(to bottom left, transparent calc(50% - 1px), white calc(50% - 1px), white calc(50% + 1px), transparent calc(50% + 1px)), linear-gradient(transparent, transparent), linear-gradient(transparent, transparent);
    background-size: 2px 100%, 2px 100%, 100% 2px, 100% 2px, 25px 25px, 100% 100%, 100% 100%;
    background-position: 0% 0%, 100% 25px, -25px 0%, 0px 100%, 100% 0%, -25px 0%, 100% 25px;
}
.cut-corner:after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    top: 0;
    z-index: -1;
    opacity: 0.5;
    background-repeat: no-repeat;
    background-image: linear-gradient(white, white), linear-gradient(white, white), linear-gradient(white, white), linear-gradient(white, white), linear-gradient(to bottom left, transparent calc(50% - 1px), white calc(50% - 1px), white calc(50% + 1px), black calc(50% + 1px)), linear-gradient(black, black), linear-gradient(black, black);
    background-size: 2px 100%, 2px 100%, 100% 2px, 100% 2px, 25px 25px, 100% 100%, 100% 100%;
    background-position: 0% 0%, 100% 25px, -25px 0%, 0px 100%, 100% 0%, -25px 0%, 100% 25px;
}

/* Just for demo */

div {
  padding: 10px;
}
body{
 background-image: radial-gradient(circle, #3F9CBA 0%, #153346 100%);
}
<div class="cut-corner">
  Some content<br>
  Some content<br>
  Some content<br>
  Some content  
</div>

1
ответ дан 15 August 2018 в 15:45

Вы можете использовать linear-gradient. Предположим, что у родителя div было фоновое изображение, и вам понадобилось div, чтобы сидеть поверх этого с серым фоном и ушастым левым углом. Вы можете сделать что-то вроде этого:

.parent-div { background: url('/image.jpg'); }
.child-div { 
   background: #333;
   background: linear-gradient(135deg, transparent 30px, #333 0);
}

Посмотрите на CodePen

Дальнейшее чтение:

Градиенты CSS на CSS-трюках Скошенные углы & amp; отрицательный граничный радиус с градиентами CSS3
11
ответ дан 15 August 2018 в 15:45
  • 1
    К сожалению, выглядит не так красиво в определенных ракурсах. – xbilek18 30 October 2014 в 12:14
  • 2
    Это действительно здорово! Единственная проблема - это не повлияет на тень ... – Nathan Arthur 10 April 2018 в 22:39

У нас была проблема с разными цветами фона для наших отрезанных элементов. И нам нужен только правый верхний и нижний левый угол.

body {
 background-color: rgba(0,0,0,0.3)
 
}

.box {
 position: relative;
 display: block;
 background: blue;
 text-align: center;
 color: white;
 padding: 15px;
 margin: 50px;
}

.box:before,
.box:after {
 content: "";
 position: absolute;
 left: 0; 
 right: 0;
 bottom: 100%;
 border-bottom: 15px solid blue;
 border-left: 15px solid transparent;
 border-right: 15px solid transparent;
}

.box:before{
	border-left: 15px solid blue;
}

.box:after{
	border-right: 15px solid blue;
}

.box:after {
 bottom: auto;
 top: 100%;
 border-bottom: none;
 border-top: 15px solid blue;
}


/* Active box */
.box.active{
	background: white;
	color: black;
}



.active:before,
.active:after {
 border-bottom: 15px solid white;
}

.active:before{
	border-left: 15px solid white;
}

.active:after{
	border-right: 15px solid white;
}

.active:after {
 border-bottom: none;
 border-top: 15px solid white;
}
<div class="box">
 Some text goes here. Some text goes here. Some text goes here. Some text goes here.<br/>Some text goes here.<br/>Some text goes here.<br/>Some text goes here.<br/>Some text goes here.<br/>Some text goes here.<br/>
</div>
<div class="box">
 Some text goes here.
</div>
<div class="box active">
 Some text goes here.
 <span class="border-bottom"></span>
</div>
<div class="box">
 Some text goes here.
</div>

1
ответ дан 15 August 2018 в 15:45

CSS Clip-Path

Использование клипа-пути - это новая альтернатива. Его начало все больше поддерживаться и теперь становится хорошо документированным. Поскольку он использует SVG для создания фигуры, он реагирует прямо из коробки.

CanIUse Generator Path Path

div {
  width: 200px;
  min-height: 200px;
  -webkit-clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 25%, 75% 0);
  clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 25%, 75% 0);
  background: lightblue;
}
<div>
  <p>Some Text</p>
</div>

CSS Transform

У меня есть альтернатива ответу преобразования веб-тики.

div {
  width: 200px;
  min-height: 200px;
  -webkit-clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 25%, 75% 0);
  clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 25%, 75% 0);
  background: lightblue;
}
<div>
  <p>Some Text</p>
</div>

20
ответ дан 15 August 2018 в 15:45

Этот код позволяет вырезать углы с каждой стороны прямоугольника:

div {
  display:block;
  height: 300px;
  width: 200px;
  background: url('http://lorempixel.com/180/290/') no-repeat;
  background-size:cover;

  -webkit-clip-path: polygon(10px 0%, calc(100% - 10px) 0%, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0% calc(100% - 10px), 0% 10px);
  clip-path: polygon(10px 0%, calc(100% - 10px) 0%, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0% calc(100% - 10px), 0% 10px);
}

http://jsfiddle.net/2bZAW/5552/

http :

//jsfiddle.net/2bZAW/5552/

5
ответ дан 15 August 2018 в 15:45

Если вам нужен прозрачный вырезанный край, вы можете использовать повернутый псевдоэлемент в качестве фона для div и поместить его для вырезания нужного угла:

body {
  background: url(http://i.imgur.com/k8BtMvj.jpg);
  background-size: cover;
}
div {
  position: relative;
  width: 50%;
  margin: 0 auto;
  overflow: hidden;
  padding: 20px;
  text-align: center;
}
div:after {
  content: '';
  position: absolute;
  width: 1100%; height: 1100%;
  top: 20px; right: -500%;
  background: rgba(255,255,255,.8);
  transform-origin: 54% 0;
  transform: rotate(45deg);
  z-index: -1;
}
<div>
  ... content ...<br/>... content ...<br/>... content ...<br/>... content ...<br/>... content ...<br/>... content ...<br/>... content ...<br/>... content ...<br/>... content ...<br/>... content ...<br/>
</div>

Обратите внимание, что это решение использует преобразования, и вам нужно добавить необходимые префиксы поставщика. Для получения дополнительной информации см. CanIuse.

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

body {
  background: url(http://i.imgur.com/k8BtMvj.jpg);
  background-size: cover;
}
div {
  position: relative;
  width: 50%;
  margin: 0 auto;
  overflow: hidden;
  padding: 20px;
  text-align: center;
}
div:after {
  content: '';
  position: absolute;
  width: 1100%; height: 1100%;
  top: 20px; right: -500%;
  background: rgba(255,255,255,.8);
  transform-origin: 54% 0;
  transform: rotate(45deg);
  z-index: -1;
}
<div>
  ... content ...<br/>... content ...<br/>... content ...<br/>... content ...<br/>... content ...<br/>... content ...<br/>... content ...<br/>... content ...<br/>... content ...<br/>... content ...<br/>
</div>

41
ответ дан 15 August 2018 в 15:45
  • 1
    Это действительно приятное решение – Thomas Wood 17 June 2015 в 03:19
  • 2
    Просто, если кто-то ищет 2 разрезанных угла решение: jsfiddle.net/o2udwet4 для предыдущих / следующих кнопок – Kiryl 19 June 2015 в 16:50
  • 3
    И окончательная версия для 2 отрезанных углов: jsfiddle.net/um6q76tu/1 – Kiryl 19 June 2015 в 17:08
  • 4
    Было бы хорошо, если бы кто-то объяснил, почему это работает. Что-то связанное с порядком рисования псевдоэлементов? – Adam Thomas 6 August 2015 в 12:24
  • 5
    @AdamThomas Фон применяется к псевдоэлементу :after, который выходит за пределы родительского div и вращается таким образом, чтобы не покрывать верхний угол. Поскольку родительский div указывает overflow: hidden, части псевдоэлемента :after, которые выходят за его пределы, не видны. – Meshaal 30 January 2016 в 23:55

Недавно я отрезал верхний правый угол и наложил вкладки, подобные папкам. Полный код noob, поэтому игнорируйте shitty-код, но я сделал это, объединив квадрат, треугольник и прямоугольник ... Это может быть или не быть новым подходом, но, надеюсь, кто-то сочтет это полезным.

https://i.stack.imgur.com/qFMRz.png

Вот HTML:

<!DOCTYPE html>
<html lang ="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" type="text/css" href="style.css"> 
    </head>
    <body>
        <div class="folders">
            <div class="container">
                <div class="triangleOne">
                    <p class="folderNames">Home</p>
                </div>
                <div class="triangleOneCut">
                </div>
                <div class="triangleOneFill">
                </div>
            </div>

            <div class="container2">
                <div class="triangleOne blue">
                    <p class="folderNames">About</p>
                </div>
                <div class="triangleOneCut blueCut">
                </div>
                <div class="triangleOneFill blue">
                </div>
            </div>

            <div class="container3">
                <div class="triangleOne green">
                    <p class="folderNames">Contact</p>
                </div>
                <div class="triangleOneCut greenCut">
                </div>
                <div class="triangleOneFill green">
                </div>
            </div>
        </div>
    </body>
</html>

Вот CSS:

.triangleOne {
    height: 50px;
    width: 40px;
    background: red;
    border-radius: 5px 0px 0px 5px;
    position: absolute;
}

.triangleOneCut {
    content: '';
    position: absolute;
    top: 0; left: 40px;
    border-top: 10px solid transparent;
    border-left: 10px solid red;
    width: 0;
}

.triangleOneFill {
    content: '';
    position: absolute;
    top: 10px; left: 40px;
    width: 10px;
    height: 40px;
    background-color: red;
    border-radius: 0px 0px 5px 0px;
}

.container {
    position: relative;
    height: 50px;
    width: 50px;
    display: inline-block;
    z-index: 3;
}

.container2 {
    position: relative;
    height: 50px;
    width: 50px;
    display: inline-block;
    left: -10px;
    z-index: 2;
}

.container3 {
    position: relative;
    height: 50px;
    width: 50px;
    display: inline-block;
    left: -20px;
    z-index: 1;
}

.blue {
    background-color: blue;
}

.green {
    background-color: green;
}

.blueCut {
    border-left: 10px solid blue;
}

.greenCut {
    border-left: 10px solid green;
}

.folders {
    width: 160px;
    height: 50px;
    /* border: 10px solid white; */
    margin: auto;
    padding-left: 25px;
    margin-top: 100px;
}

.folderNames {
    text-align: right;
    padding-left: 2px;
    color: white;
    margin-top: 1.5px;
    font-family: monospace;
    font-size: 6.5px;
    border-bottom: double 1.5px white;
}
0
ответ дан 15 August 2018 в 15:45

Другие вопросы по тегам:

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