相关疑难解决方法(0)

使用CSS剪切角落

我正在寻找"切割"div的左上角,就像你已经折叠了一页的一角.

我想用纯CSS做,有什么方法吗？

css css3 css-shapes

Rix*_*ius

2014 07-30

55
推荐指数

9
解决办法

15万
查看次数

在div上切角,图像设置为100%高度和宽度

这基本上就是我想要实现的目标 - > https://jsfiddle.net/tak1pyt7/1/

.clip {
  width: 500px;
  height: 500px;
  -webkit-clip-path: polygon(100% 0, 100% 81%, 82% 100%, 0 100%, 0 0);
  clip-path: polygon(100% 0, 100% 81%, 82% 100%, 0 100%, 0 0);
}
body {
  background-image: radial-gradient(circle, #3F9CBA 0%, #153346 100%);
  height: 100%;
  width: 100%;
}

Run Code Online (Sandbox Code Playgroud)

<body>
  <div class="clip">
    <img src="http://lorempixel.com/600/600/" width="100%" height="100%" />
  </div>
</body>

Run Code Online (Sandbox Code Playgroud)

虽然我有一个解决方案,但是小提琴中的代码存在各种问题,如下所示:

它不适用于IE或Edge,因为不支持剪辑路径
剪辑路径不支持Firefox中的CSS形状,如果你需要使它在Firefox中工作,那么你需要提供内联svg
尝试提供内联svg,但它有自己的一系列问题,不能解决我的要求.无论容器的高度和宽度如何,我都需要切割尺寸保持不变.使用内嵌svg立即切割图像,它的尺寸随高度和宽度的变化而变化,即切割是响应的.我需要切割的静态尺寸.

除了上面的解决方案,我搜索了很多解决方案,这些解决方案可能有助于我创建带有切角的div,切割本身是透明的,因为我背面没有坚实的背景.

探索了其他解决方案

使用CSS3 Gradients示例

样本 - > http://jsfiddle.net/spdawson/3Tc8S/light/
如果您拥有占据该区域的完整高度和宽度的内容,例如在帖子开头提供的小提琴,则不起作用.

使用CSS边框

样本 - > http://jsfiddle.net/spdawson/HhZQe/light/
对我不起作用因为必须在其上进行切割的容器必须包含纯色背景颜色,而我的设计并非如此.

使用jQuery插件(http://jquery.malsup.com/corner/)

示例代码 - …

html css svg css-shapes clip-path

Vin*_*nay

2015 09-03

6
推荐指数

1
解决办法

1118
查看次数

可以使用仅有CSS和无图像的角度设计此按钮

我正在尝试使用CSS设计一个按钮,而没有图像.问题在于左下角和右上角,当按钮处于纯色背景时,我使用背景颜色来实现此目的.问题是当背景不是纯色时你可以看到角落,就像下面的演示一样.

所以,我想用一种通用的方式来编写这个按钮,只用CSS而没有图像.

谢谢!

这是按钮→的演示

这是我在演示中的HTML:

<div id="banner">
  <div id="button-box">
    <a class="btn-cornered btn-cornered-dark-bg" href="#"><span>Learn More</span></a>
  </div>
</div>

Run Code Online (Sandbox Code Playgroud)

而CSS:

#banner {
  background: url('https://d3vv6lp55qjaqc.cloudfront.net/items/2D1R0A0B1q031R1C2P26/Image%202017-11-07%20at%201.57.17%20PM.png?X-CloudApp-Visitor-Id=8b9380dd59b56afec49e5f1e289c6692&v=53edcac2') no-repeat center -420px;
  background-size: cover;
  display: block;
  width: 100%;
  height: 200px;
  text-align: center;
}

#button-box {
  padding: 50px 0;
}

/* Button */
.btn-cornered {
  padding-left: 20px;
  padding-right: 20px;
  position: relative;
  display: inline-block;
  line-height: 53px;
  text-align: center;
  color: #fff;
  font-size: 24px;
  border: 1px solid #fff;
  border-bottom-left-radius: 10px;
  border-top-right-radius: 10px;
  text-decoration: none;
}
.btn-cornered:before {
    position: absolute;
    left: -1px;
    bottom: …

Run Code Online (Sandbox Code Playgroud)

css button css3

Mik*_* B.

lucky-day

4
推荐指数

1
解决办法

1095
查看次数