【问题标题】:Is it possible to create an angled corner in CSS?是否可以在 CSS 中创建斜角?
【发布时间】:2013-10-15 10:04:27
【问题描述】:

我想知道是否有任何方法可以使用纯 CSS 创建这个形状。为了进一步扩展这个问题,这个形状需要在里面裁剪图像(把它想象成一个蒙版——但是灰色的边框必须是可见的)。

或者我最好在 canvas/svg 中创建它?

【问题讨论】:

标签: css css-shapes


【解决方案1】:

保持边界有点困难,但我设法使用带有父容器的 :before 和 :after 元素实现了关闭效果(:before 和 :after 不适用于 img 标签)

  1. 为容器添加边框

  2. 添加一个before来遮挡一个角,偏移-1来覆盖边框

  3. 添加一个与之前稍有偏移的之后,以在截断内创建线条

如你所见,45度线的粗细有点问题:

.cutCorner {
    position:relative; background-color:blue; 
    border:1px solid silver; display: inline-block;
}

.cutCorner img {
    display:block;
}

.cutCorner:before {
    position:absolute; left:-1px; top:-1px; content:'';
    border-top: 70px solid silver;
    border-right: 70px solid transparent;
}

.cutCorner:after {
    position:absolute; left:-2px; top:-2px; content:'';
    border-top: 70px solid white;
    border-right: 70px solid transparent;
}
<div class="cutCorner">
    <img class="" src="https://www.google.co.uk/logos/doodles/2013/william-john-swainsons-224th-birthday-5655612935372800-hp.jpg" />
</div>

JSFiddle

【讨论】:

  • +1,与我即将发布的内容(fiddle)几乎相同,因此发布回答过程中止:D
  • 有趣的是,Harry,你的“加粗”边框让斜线看起来更好,所以还是很有用的!
  • 我接受这个答案,因为我认为它尽可能接近,而且它是可扩展的,这太棒了,所以谢谢你。它仍然不是我想要的(见拐角边框 - 它在底部是圆形的),但我会和我们的设计师一起解决:-)
  • 你能添加一些截图来逐步解释为什么之前/之后结果是 45 度边界吗?目前我真的不明白为什么这段代码有效。
  • @mgutt:别以为你还在找这个。但只是为了解释一下,t 基本上使用 CSS 边框技巧来创建三角形。 before 产生一个,after 产生另一个。然后它们以这样一种方式定位,即一个三角形位于另一个三角形的左侧,从而产生类似边框的效果。您可以在 demo 中看到我更改了一个三角形的颜色。
【解决方案2】:

SEE THE DEMO

您可以通过使用 pseudo 以及 border-widthborder-color 来做到这一点,请参阅下面的代码以了解它是如何完成的。

HTML

<div class="cut"></div>

CSS

.cut {
    position:relative;
    width:500px;
    height: 200px;
    padding:20px;
    color:#000;
    background:#ccc;
}

.cut:before {
    content:"";
    position:absolute;
    top:0;
    left:0;
    border-width:30px 30px 0px 0px;
    border-style:solid;
    border-color:#fff transparent transparent #fff ;
}

另一个使用这个 jQuery 脚本来支持跨浏览器的解决方案。 --> http://jquery.malsup.com/corner/

SEE THE DEMO HERE

HTML

<div class="cut"></div>

CSS

.cut {
    position:relative;
    width:500px;
    height: 200px;
    padding:20px;
    color:#000;
    background:#ccc;
}

JS

$(".cut").corner("bevel tl 50px");

【讨论】:

  • 好的,但是如果父母的背景是图片呢?
  • 然后它会在左上角显示白色三角形。有趣的是,圆角比斜角更容易。
  • @PeterM:我认为这将是问题所在,因为用户强调需要灰色边框。
  • @matewka 是的,它会在左上角显示白色三角形,我没有任何用于背景图像的解决方法,至少没有 css。
  • Aand 只需查看该页面上的源代码.. 哦,天哪,这是很多 div.. divs = 像素,显然。
【解决方案3】:

使用 CSS:

可以使用 CSS 实现精确的形状。我们的想法是在左上角设置一个带有border-radius 的元素,将其沿 Y 轴倾斜,然后将其定位在矩形之前。这样做会使矩形元素看起来好像在顶部有一个三角形切口,有一个弯曲的边缘。

如果形状的内部只有一种颜色(纯色或透明),则可以仅使用一个元素来实现。但是,如果需要在形状内添加图像(如问题中所述),那么我们需要多个元素,因为我们必须反转图像上的skew 效果,而如果没有子元素则无法做到这一点。

.shape,
.shape-image {
  position: relative;
  height: 150px;
  width: 400px;
  border-bottom: 2px solid crimson;
  overflow: hidden;
}
.shape:before,
.shape:after,
.shape-image:after {
  position: absolute;
  content: '';
  top: 0px;
  height: 100%;
  z-index: -1;
}
.shape:before,
.shape-image .before {
  left: 0px;
  top: -2px;
  width: 50px;
  border: 2px solid crimson;
  border-width: 3px 0px 0px 2px;
  border-top-left-radius: 8px;
  transform-origin: right bottom;
  transform: skewY(-45deg);
}
.shape:after,
.shape-image:after {
  left: 52px;
  width: calc(100% - 54px);
  border: 2px solid crimson;
  border-left: none;
}
.shape:after,
.shape:before {
  background: aliceblue;
}
.shape.semi-transparent:after,
.shape.semi-transparent:before {
  background: rgba(150, 150, 150, 0.5);
}
.shape-image .before {
  position: absolute;
  top: 0px;
  height: 100%;
  overflow: hidden;
}
.shape-image .before .img {
  height: 100%;
  width: 100%;
  border-top-left-radius: 8px;
  background: url(http://lorempixel.com/400/150);
  transform-origin: right bottom;
  transform: skewY(45deg);
}
.shape-image:after {
  background: url(http://lorempixel.com/400/150);
  background-position: -50px 0px;
}

/* Just for demo */

body{
  background-image: radial-gradient(circle, #3F9CBA 0%, #153346 100%);
}
.shape{
  margin: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class="shape"></div>
<div class="shape semi-transparent"></div>
<div class="shape-image">
  <div class="before">
    <div class="img"></div>
  </div>
</div>

使用 SVG:

也可以使用 SVG 以更轻松的方式实现相同的效果,如下面的 sn-p 所示。

.vector {
  height: 150px;
  width: 410px;
  padding-left
}
svg {
  height: 100%;
  width: 100%;
}
path {
  stroke: crimson;
  stroke-width: 2;
  fill: none;
}
polygon {
  fill: url(#bg);
}

/* Just for demo */

body {
  background-image: radial-gradient(circle, #3F9CBA 0%, #153346 100%);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class='vector'>
  <svg viewBox='0 0 400 150' preserveAspectRatio='none'>
    <defs>
      <path d='M50,2 h 342 v144 h-390 v-90 a6,12 0 0,1 3,-9 z' id='p' />
      <clipPath id='clipper'>
        <use xlink:href='#p' />
      </clipPath>
      <pattern id='bg' width='400' height='150' patternUnits='userSpaceOnUse'>
        <image xlink:href='http://lorempixel.com/400/150' height='150' width='400' />
      </pattern>
    </defs>
    <polygon points='2,2 392,2 392,148 2,148' clip-path='url(#clipper)' />
    <use xlink:href='#p' />
  </svg>
</div>
<h3>Original Image</h3>
<img src='http://lorempixel.com/400/150' />

截图:

【讨论】:

    【解决方案4】:

    可以这样做,但它是一个 CSS3 解决方案,因此我认为不适用于旧浏览器。

    我所做的是,我创建了两个 div,一个周围有边框,另一个只有底部有边框。使用 translate 然后我将该 div 旋转 45 度以掩盖另一个 div 的角,从而获得所需的效果。

    HTML

    <div class="holder">
        <div class="main"></div>
        <div class="corner"></div>
    </div>
    

    CSS

    .holder { 
        position:relative;
        width: 180px;
        margin:30px
    }
    
    .main {
        width: 160px;
        height: 40px;
        border: 1px solid grey;
        position:absolute; 
        left:0;
        z-index: 1;
    }
    .corner { 
        border-bottom: 1px solid grey;
        width:30px; 
        height: 41px; 
        position:absolute;
        top:-25px;
        right:0;
        z-index:2;
        background:#fff;
    
        /* Safari */
        -webkit-transform: rotate(45deg);    
        /* Firefox */
        -moz-transform: rotate(45deg);    
        /* IE */
        -ms-transform: rotate(45deg);    
        /* Opera */
        -o-transform: rotate(45deg);
    }
    

    输出

    Fiddle

    【讨论】:

    • 如果背景是图片或者渐变,这个方案就达不到要求了。
    • @GabyakaG.Petrioli 啊,我明白了!
    • @danrhul,虽然它看起来很漂亮.. 就像被胶带粘住一样 :) (单独使用 css/html 是不可能的
    • @GabyakaG.Petrioli 现在想想,这是一个非常粗略的解决方案。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2016-09-27
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2020-09-17
    相关资源
    最近更新 更多