CSS 상자에 기울어진 모서리를 만드는 방법은 무엇입니까?

CSS 상자에 기울어진 모서리 적용

시각적으로 눈에 띄는 효과를 얻으려면 때로는 CSS 상자에 기울어진 모서리를 추가하는 것이 바람직합니다. 이렇게 하면 간단한 직사각형을 역동적이고 눈길을 끄는 요소로 즉시 변환할 수 있습니다.

컷 코너 상자 만들기

CSS3를 지원하는 브라우저의 경우 다각형 속성은 이 문제에 대한 강력한 솔루션을 제공합니다. . 그러나 더 넓은 브라우저 호환성을 위해서는 Slantastic 기술(http://meyerweb.com/eric/css/edge/slantastic/demo.html)이 더 나은 대안이 될 수 있습니다.

Slantastic 구현

HTML:

<div class="cornered"></div>
<div class="main">Hello</div>

CSS:

.cornered {
    width: 160px;
    height: 0px;
    border-bottom: 40px solid red;
    border-right: 40px solid white;
}

.main {
    width: 200px;
    height: 200px;
    background-color: red;
}

추가 옵션

투명 테두리가 있는 모서리 만들기 및 텍스트의 경우 다음 대체 접근 방식을 구현할 수 있습니다.

HTML:

<div class="outer">
    <div class="cornered">It's possible to put text up here, too...
    </div>
    <div class="main">Hello hello hello hello
    hello hello hello hello hello</div>
</div>

CSS:

.outer {
    background-color: #ccffff;
    padding: 10px;
    font-size: x-small;
}

.cornered {
    width: 176px;
    height: 0px;
    border-bottom: 40px solid red;
    border-left: 40px solid transparent;
}

.main {
    width: 200px;
    height: 200px;
    background-color: red;
    padding: 0 8px;
}

위 내용은 CSS 상자에 기울어진 모서리를 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!