为了账号安全,请及时绑定邮箱和手机立即绑定

是否可以在CSS中创建一个斜角?

/ 猿问

是否可以在CSS中创建一个斜角?

开满天机 2019-11-19 08:53:36

我想知道是否有任何方法可以用纯CSS创建此形状。为了进一步扩展此问题,此形状需要将图像裁剪到内部(可以将其视为遮罩,但是必须看到灰色边框)。

还是我最好在canvas / svg中创建它?


查看完整描述

3 回答

?
DIEA

保留边框有点困难,但是我设法使用:before和:after元素与父容器实现了接近效果(:before和:after在img标签上不起作用)


在容器上添加边框


添加前一个以遮盖拐角并偏移-1以覆盖边框


添加一个与after稍有偏移的after,以在切除区域内创建线


如您所见,45deg线的粗细是一个问题:


.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>


查看完整回答
反对 回复 2019-11-19
?
潇潇雨雨

您可以通过使用伪指令border-width以及border-color以下代码来了解如何完成此操作。


<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/


在此处查看演示


的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");


查看完整回答
反对 回复 2019-11-19
?
慕圣8478803

使用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可以更轻松地实现相同的目的。

.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' />


查看完整回答
反对 回复 2019-11-19

添加回答

回复

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信