Вырезать углы с помощью CSS - PullRequest
Новая
       40

Вырезать углы с помощью CSS

54 голосов
/ 06 сентября 2011

Я пытаюсь "обрезать" верхний левый угол элемента, как если бы вы сложили угол страницы вниз.

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

Ответы [ 13 ]

0 голосов
/ 09 апреля 2019

Еще одно решение: html: 

<div class="background">
  <div class="container">Hello world!</div>
</div>

css: 

.background {
  position: relative;
  width: 50px;
  height: 50px;
  border-right: 150px solid lightgreen;
  border-bottom: 150px solid lightgreen;
  border-radius: 10px;
}
.background::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  border: 25px solid lightgreen;
  border-top-color: transparent;
  border-left-color: transparent;
}
.container {
  position: absolute;
  padding-left: 25px;
  padding-top: 25px;
  font-size: 38px;
  font-weight: bolder;
}

https://codepen.io/eggofevil/pen/KYaMjV

0 голосов
/ 26 августа 2017

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

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 голосов
/ 21 марта 2014

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

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;
}
Страница:
...