CSS框上的倾斜角 [英] Slanted Corner on CSS box

问题描述

我一直在玩CSS很短的时间，我试图有一个正常的盒子，但左上角以45度角切断。不是少量;我在看那个角度的一个相当大的角落。此效果：

解决方案

h1>说明

精彩（ http：// meyerweb.com/eric/css/edge/slantastic/demo.html ）支持旧版浏览器。对于特定CSS3，请尝试CSS多边形： http://alastairc.ac/2007/02/dissecting-css-多边形/ 。

代码

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; 
} 
  

结果： http://jsfiddle.net/mdQzH/

替代代码

要在边框部分中使用透明边框和文本... HTML：

 < div class =outer> 
< div class =cornered>有可能把文本放在这里，
，但是如果你想要它跟随倾斜，你必须堆栈​​
其中几个。 / 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; 
} 
  

结果： http://jsfiddle.net/76EUw/2

I have been playing with CSS for only a short time and am trying to have a normal box but with the top left hand corner cut off at a 45 degree angle. Not a small amount either; I'm looking at a quite large corner cut at that angle. This effect:

How should I go about it?

解决方案

Descriptions

Slantastic (http://meyerweb.com/eric/css/edge/slantastic/demo.html) supports old browsers. For CSS3-specific, try CSS polygons: http://alastairc.ac/2007/02/dissecting-css-polygons/.

Code

The HTML:

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

The CSS:

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

The result: http://jsfiddle.net/mdQzH/

Alternative Code

To use transparent borders and text in the border section... The HTML:

<div class="outer">
<div class="cornered">It's possible to put text up here, too
    but if you want it to follow the slant you have to stack
    several of these.</div>
<div class="main">Hello hello hello hello
hello hello hello hello hello</div>
</div>

The 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;
}

The result: http://jsfiddle.net/76EUw/2

这篇关于CSS框上的倾斜角的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！