腾讯云
开发者社区
文档
建议反馈
控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
搜索
搜索
关闭
发布
登录/注册
精选内容/技术社群/优惠产品,
尽在小程序
立即前往
文章
问答
视频
沙龙
1
回答
内部和外部SVG的剪辑路径
html
、
css
、
svg
我试图使用内部和外部SVG创建一个三角形。 然而,由于某些原因,这是行不通的。 我试着在这里使用这个工具: 并得到它的“点”坐标,以创建一个完美的剪辑三角形,在我的内部和外部SVG,但没有运气。 这是我的HTML: <figure class="clip-holder"> <img src="https://www.thesun.co.uk/wp-content/uploads/2016/06/nintchdbpict000244881006.jpg" class="clip-svg-inline" width=
浏览 3
提问于2016-06-21
得票数 0
3
回答
减少两个裁剪图像之间的间距
html
、
css
、
clip-path
我正在使用clip-path来裁剪两个图像。结果是 一切都很好,但我想减少这些图像之间的间距,就像这样 .clip-wrap { display: inline; } .element { -webkit-clip-path: polygon(0 100%, 0 0, 100% 0, 60% 100%); clip-path: polygon(0 100%, 0 0, 100% 0, 60% 100%); } .element2 { -webkit-clip-path: polygon(40% 0, 100% 0, 100% 100%, 0 100%);
浏览 27
提问于2016-09-23
得票数 3
回答已采纳
2
回答
了解剪辑路径
html
、
css
目前,我正在尝试学习HTML和CSS,并且遇到了剪辑路径。也就是从这个。 我的理解是,使用剪辑路径,例如多边形属性,允许您防止某些部分被渲染,从而允许您创建外观独特的背景容器。 但是,当我尝试在直接复制CSS的HTML代码上执行此操作时,我没有看到类似的行为。我的行为是它的行为就像一个大的矩形。为什么会这样呢? 这是HTML: <header class="myClass"> <h1>MyHeader</h1> <p>COmments </p> <p>Ever More
浏览 4
提问于2016-08-30
得票数 0
回答已采纳
2
回答
如何使用css对图像进行造型?
html
、
css
我如何用CSS做到这一点,我试着用clip-paht做这件事,但是Mozilla FireFox不支持它! .div{ -webkit-clip-path: polygon(1% 100%, 54% 85%, 67% 81%, 78% 79%, 91% 80%, 100% 82%, 100% 0, 0 0); clip-path: polygon(1% 100%, 54% 85%, 67% 81%, 78% 79%, 91% 80%, 100% 82%, 100% 0, 0 0); }
浏览 2
提问于2017-02-25
得票数 2
回答已采纳
2
回答
css clip-路径在Opera和Internet Explorer中不起作用
css
、
svg
、
cross-browser
、
clip
我需要使用裁剪来实现一个具有对角线右边缘的类似进度条的元素,而css3裁剪路径似乎是最好的选择。 我可以很容易地找到在Firefox和Chrome上工作的解决方案,但经过几个小时的试验,我在Internet Explorer和Opera上都没有取得任何进展:它们似乎就是简单地忽略了剪辑路径! 我更好地学习了Opera,它确实支持clip-path (虽然-o-clip-path似乎不存在),因为只有几个版本。 这里是我的完整的html文件,包括css和所有的,准备好复制/粘贴并运行,谁有什么建议?提前谢谢。 <!DOCTYPE html> <html> <head
浏览 0
提问于2014-01-22
得票数 0
1
回答
有角度的分隔符,图像在下面的部分
css
、
reactjs
、
tailwind-css
我正在用我的React应用程序做一个切片,或有角度的边缘。我使用顺风css,但是使用一些自定义的CSS,我设法做到了。然而,当它做切片时,我希望用它下面的div填充,而不是白色。 这有可能吗? 这是我的CSS .angle--bottom-right { position: relative; overflow: hidden; -webkit-clip-path: polygon(0 0, 100% 0, 100% calc(100% - 2vw), 0 100%); clip-path: polygon(0 0, 100% 0, 100%
浏览 0
提问于2021-08-26
得票数 0
3
回答
如何在FF和IOS中使用剪辑路径多边形
javascript
、
css
、
svg
、
clip-path
我尝试写一个小插件,以更有机的方式打开模式框,因此我决定动画剪辑路径属性。 现在,此代码仅在chrome:中工作。 它看起来像剪辑路径属性中的 polygon()。Safari & Mobile也和它做斗争。 在Firefox和Safari以及Mobile中,是否也有一种类似的简单方法使其工作呢?知道我能怎么解决这个问题吗? 下面是一个有用的例子: var $ov = $('.overlay'); $(document).on('click touchstart', '.inner', function(){ var coords,
浏览 1
提问于2015-03-02
得票数 8
回答已采纳
2
回答
修复IE/Edge CSS剪辑路径
css
、
internet-explorer-11
、
microsoft-edge
、
clip-path
我在使用剪辑路径CSS属性时遇到了IE11/Edge浏览器的剪辑路径属性问题。 下面的代码片段是我到目前为止所拥有的,在所有浏览器中都工作得很好,除了微软的浏览器。我不明白如何解决这个问题。 .banner { overflow: visible; position: relative; min-height: 50vh; background-size: cover; background-position: right; background-repeat: no-repeat; display: flex; background-image: url(
浏览 28
提问于2020-02-14
得票数 1
回答已采纳
1
回答
如何在垂直方向上调整剪辑路径背景的大小?
css
、
responsive
、
clip-path
我在使用css clip-path属性做响应式背景时遇到了一些麻烦。在我的例子中,我在我的内容容器中有一个背景,并且这个容器有超过100%的vh。这个背景有一个45º的红色背景,所以当我调整窗口大小到中等大小时,红色的bg也不会调整大小。 当我调整窗口大小时,有没有办法垂直和水平地调整剪辑路径的大小? .home { background-color: $bg-primary-color; &::before { width: 100%; min-height: 87.3rem; position: absolute;
浏览 14
提问于2020-05-09
得票数 0
4
回答
可以有多个带有剪辑路径的蒙版吗?
css
、
mask
、
clip-path
嗨, 我想知道是否可以在同一元素上使用多个掩码,就像这样: clip-path:polygon(8% 0%, 8% 7%, 14% 12%), polygon(96.4%, 92% 96.4%, 97% 92.3%), polygon(97% 15%, 99% 13%, 99% 0%); 这样,我就可以只显示元素中彼此分离的某些区域。 谢谢。
浏览 4
提问于2016-06-06
得票数 25
2
回答
火狐上疯狂的CSS剪辑路径错误
html
、
css
、
svg
、
clip-path
我正在尝试从的CSS剪辑路径,我有一个疯狂的错误。简而言之,代码在CodePen和JSFiddle上都能工作,但是它不能在我的本地/应用程序上工作。 这是我想出的多边形的代码。首先是CSS: nav { position: fixed; bottom: 0; background: #BE0F16; color: #fff; width: 100%; padding: 2rem 1rem; text-align: right; -webkit-clip-path: polygon(0 0, 0 100%, 100% 100%, 1
浏览 3
提问于2015-08-02
得票数 2
回答已采纳
2
回答
SVG剪辑路径不工作
css
、
html
、
svg
我是一个新手网站开发人员,所以请轻松一点。我正试着制作一个美国形状的定制元素。在我的html中,我创建了一个带有clipPath子元素的svg元素,以及一个显示它必须经过的坐标点的多边形元素子元素,但是它没有显示。下面是我的HTML和CSS。 HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="styleshee
浏览 2
提问于2015-07-27
得票数 0
回答已采纳
3
回答
用css绘制3个三角形
css
我正在努力使上面的设计在CSS。我试着用剪贴画使三角形在中间,但然后蓝色和绿色的三角形是看不到的。我如何使这一宽度的屏幕和响应也? 这些是三角形的剪辑路径: .centerTriangle { clip-path: polygon(0 0, 50% 100%, 100% 0); background-color: red; } .leftTriangle { clip-path: polygon(0 0, 0% 100%, 100% 100%); background-color: blue; } .rightTriangle { clip-path: p
浏览 2
提问于2022-08-29
得票数 2
回答已采纳
2
回答
如何动画在SVG元素中定义的裁剪路径?
html
、
css
、
svg
、
css-animations
、
clip-path
我知道如何动画一个直接定义在CSS中的剪辑路径,但我不知道如何从SVG clipPath元素引用剪辑路径。 我一直在尝试使用CSS来制作简单的剪辑路径动画,直到我意识到不能直接将复合路径定义为剪辑路径,所以我转向SVG的clipPath,它允许定义多个路径。但是动画不起作用,也就是说,没有平稳的过渡。 这就是我想要的..。 <svg> <defs> <clipPath id="shape--start"> <polygon points="0,100 22.222,133.333
浏览 7
提问于2019-10-22
得票数 4
回答已采纳
2
回答
如何使用html div和css创建形状
html
、
css
我想创建这样的html页面 我用svg创建了这个,这是我的代码 <body> <div style="width: 100%; background-image: url('https://t4.ftcdn.net/jpg/01/25/20/05/360_F_125200542_AyamLpAFVwGqUx2ntcrQpLQE3pde3h23.jpg'); background-repeat: no-repeat; background-size: cover;"> <svg viewbox="
浏览 1
提问于2020-12-11
得票数 3
回答已采纳
3
回答
剪辑路径在firefox [% values]中不起作用
html
、
css
、
svg
、
clip-path
我正尝试在mozilla中运行svg clip-path,但它不起作用。 .mask-1 { -webkit-clip-path: polygon(0% 0%, 58% 0%, 39% 81.8%, 0% 81.8%); clip-path: polygon(0% 0%, 58% 0%, 39% 81.8%, 0% 81.8%); } 它在铬合金中工作得很好。有没有人能帮我解决mozilla和其他浏览器的问题?
浏览 0
提问于2015-11-20
得票数 10
1
回答
Svg剪辑路径在Firefox、IE和Opera中不起作用
html
、
css
、
svg
我已经按照这些说明制作了一个剪裁形状的 这是我的代码 CSS div#offer { overflow:hidden; width:2028px; height:985px; margin-top:-765px; position:relative; /*Chrome,Safari*/ -webkit-clip-path: polygon(2028px 830px,0px 985px,0px 0px,2028px 0px); -ms-clip-path: polygon(2028px 830px,0px 985px,0px 0px,2028px 0px); /*
浏览 3
提问于2014-08-06
得票数 2
2
回答
创建特定的div形状(就像带有尾巴的多边形)
html
、
css
、
css-shapes
我正在尝试创建这样的文本容器,但没有成功: 你能给我提出解决办法吗? 我能够通过clip-path创建类似的东西,但我想知道如何才能创建这个形状元素?此外,请注意色差。还有别的办法吗? CSS div { width: 350px; height: 350px; background: #1e90ff; -webkit-clip-path: polygon(50% 0%, 91% 22%, 100% 45%, 91% 81%, 33% 88%, 0% 60%, 6% 23%); clip-path: polygon(50% 0%, 91% 22%,
浏览 4
提问于2015-11-19
得票数 4
回答已采纳
2
回答
悬停时CSS启动和暂停动画
html
、
css
、
css-animations
、
keyframe
、
clip-path
我试图让这个暂停动画,而不是在完成后,我在div上盘旋。我要它在我盘旋的时候保持正方形。 我搜索了一下,发现有点暂停,但并没有转换成我的代码。 /*HTML*/ <div class="pers"> /*CSS*/ .pers{ margin-bottom: -4px; width: 300px; height: 300px; display: inline-block; background-color: green; clip-path: polygon(50% 52%, 100% 0, 100% 100%, 0% 100%); } .pers:h
浏览 0
提问于2018-10-20
得票数 2
回答已采纳
3
回答
悬停多个SVG多边形时的图像z索引
html
、
css
、
svg
我在做SVG,我的概念是我有两个图像,.overlap在一起,使用svg多边形,我做了五个不同的三角形。我的目标是实现先叠加完成图像的显示,并且当鼠标悬停在三角形、形状、背景、.box方框上时,需要显示图像。这是我在给出一个叠加图像之前的初始代码。 .box { position: relative; background-image: url('https://picsum.photos/id/1/1000/800'); background-repeat: no-repeat; width: 100%; height: 600px; backg
浏览 6
提问于2019-06-13
得票数 2
回答已采纳
1
回答
剪贴画路径SVG多边形
html
、
css
、
internet-explorer
、
svg
、
clip
这个代码在IE中不起作用,我需要使用它,因为我必须在地图上的一个点后面画一个箭头。 div { width: 100%; height: 100%; position: absolute; top: 0px; right: 0px; background: red; clip-path: url(#cliparrow); -webkit-clip-path: polygon(777px 285px, 0px 303px, 777px 315px); } svg { width: 0; height: 0; float: left; positi
浏览 3
提问于2014-11-13
得票数 1
1
回答
具有半透明背景的移动CSS边框
html
、
css
因此,我想要建立一个具有以下布局的无限画廊: (第一张图片也有一个边框) 如您所见,只有当前活动的图片是可见的,而不活动的图片仅由它们的边框指示,容器是半透明的。 现在,让这有点棘手的是,边框不是一个普通的矩形,而是移动到一个平行四边形。为了实现这一点,我尝试了以下两种方法: 偏斜 我的第一种方法是只使用CSS转换: skewX(deg); 可悲的是,倾斜不仅会移动,而且会扭曲画面。 剪辑路径 的布局如下 <div class="wrapper"> <img></img> </div> 风格: .wrapper {
浏览 3
提问于2021-09-13
得票数 3
回答已采纳
2
回答
带有自定义剪辑路径CSS HTML的相邻Div
html
、
css
我有三块钱。我想使用剪辑路径,但我留下了空白。我想要在另一个上面滑动div,这样div看起来就像在图像( image:)中所示(没有空白)。HTML和CSS代码如下: 我的CSS代码如下: .step-label { font-weight: bold; color: white; font-size: 12px; display: block; margin: auto; width: 96%; display: flex; text-align: center; } .step-x { displ
浏览 6
提问于2021-11-09
得票数 1
回答已采纳
2
回答
将剪辑路径从右下角旋转到左下角
css
、
clip-path
我在css上有一个按钮: button { background: #FB5D5D; width: 350px; height: 54px; border-radius: 4px; position: relative; z-index: 10; overflow: hidden; color: white; border: none; transition: clip-path 3s ease, transform 3s ease, -webkit-clip-path 3s ease; } button:after { content: &
浏览 29
提问于2021-08-21
得票数 0
回答已采纳
1
回答
图像中提到的Div的CSS形状
html
、
css
、
shapes
我有2个CSS Div形状的图像。我想让我的DIVs像在图像中一样。 ? ? 任何帮助都是最好的。 .imageOne { clip-path: polygon(0 0, 100% 0%, 100% 11%, 0 0); height: 100px; background: blue; } .imageTwo { clip-path: polygon(80% 30%, 100% 41%, 100% 41%, 0 40%, 0 40%); height: 100px; background: blue; } <div class="i
浏览 18
提问于2021-01-23
得票数 1
回答已采纳
2
回答
CSS Triangle clip- Tablet/IPad中未显示SVG标志的路径
html
、
css
、
ipad
、
svg
、
tablet
嗨,我的html/css中有一个三角形的角元素。 裁剪路径在桌面上运行良好,但在平板电脑/Ipad上不起作用-它只显示正常的矩形标志,不裁剪 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/2.8.0/css/flag-icon.min.css" /> HTML <div class="triangle"><span class="flag-icon flag-icon-us">&
浏览 3
提问于2017-02-27
得票数 0
回答已采纳
1
回答
如何对倾斜的边缘使用剪辑路径?
html
、
css
、
clip-path
当前,将此CSS用于从左到右向上倾斜的底部: clip-path: polygon( 0 0, 100% 0, 100% calc(100% - 3vw), 0 100% ); 对于响应性解决方案,它工作得很好,但是很难弄清楚如何对从左到右倾斜的div顶部的响应解决方案这样做。 我试过这个: clip-path: polygon( 0 0, 100% calc(100% - 29vw), 100% 100%, 0 100% ); 谢谢!
浏览 1
提问于2019-03-04
得票数 2
回答已采纳
3
回答
CSS -如何向css形状添加边框颜色
css
、
css-shapes
我需要添加一个边框颜色的css形状,但我不知道如何做。我已经尝试过使用border或border-width,但是不起作用。 这是我的密码: .shape { width: 400px; height: 40px; background-color: green; -webkit-clip-path: polygon(5% 0, 100% 0, 100% 100%, 0 100%, 0 100%); clip-path: polygon(5% 0, 100% 0, 100% 100%, 0 100%, 0 100%);
浏览 1
提问于2017-06-02
得票数 0
回答已采纳
1
回答
剪接路径多边形
html
、
css
、
angular
、
clip-path
在我的CSS代码中,我使用的是两个剪辑路径polygon(),但是第二个就在第一个下面,不会粘在第一个div的左下角。这是截图..。 ..。我的密码是: CSS .container1 { z-index: 1; background-image: url('/assets/images/esron.gif'); background-size: cover; width: 100vw; height: 50vh; clip-path: polygon(0px 40vh,100vw 50vh,100vw 0,0 0);
浏览 1
提问于2017-05-14
得票数 0
回答已采纳
3
回答
如何显示由周围的div裁剪的图像周围的边框
html
、
css
我有如下所示的图片: 以下是我的HTML: <div class="diamond-border" style="left:10px;top:10px"></div> <div class="diamond" style="left:13px;top:13px" > <img src="http://res.cloudinary.com/demo/image/upload/sample.jpg" /> </div> 这是我的css: .dia
浏览 6
提问于2017-05-12
得票数 1
回答已采纳
2
回答
通用浏览器支持的Clip-Path的替代方案?
css
、
wordpress
、
firefox
、
svg
、
clip-path
我使用了一些剪裁路径多边形形状在我的网站上创建了向下指向的内容框,你可以在主页上看到一些例子:,这是我正在使用的CSS: .bottom_arrow { -webkit-clip-path: polygon(100% 0, 100% 85%, 50% 100%, 0 85%, 0 0); clip-path: polygon(100% 0, 100% 85%, 50% 100%, 0 85%, 0 0); } 但据我所知,如果不做一些修改(比如使用.svg URL?),这在火狐中是行不通的。即使这样在IE和Edge中也不起作用。有没有其他的CSS技巧可以用来使这些形状具有更好的跨浏览器支持?
浏览 44
提问于2017-02-07
得票数 9
7
回答
如何在使用CSS clip-path时圆角
css
、
clip-path
我希望能够在我创建的这个形状上圆整最左边的3个角,你知道怎么做吗? div { position: absolute; z-index: 1; width: 423px; height: 90px; background-color: #b0102d; color: white; right: 0; margin-top: 10vw; -webkit-clip-path: polygon(100% 0%, 100% 50%, 100% 100%, 25% 100%, 0% 50%, 25% 0%); clip-path: polygon(100% 0
浏览 24
提问于2015-08-02
得票数 22
2
回答
如何在这个多边形周围画一个边框?
html
、
css
我使用polygon创建了一个有5个角的形状,如下所示。 这是制作它所需的css: div { width: 280px; height: 280px; background: #1e90ff; -webkit-clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 0 48%, 0% 0%); clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 0 48%, 0% 0%); border: 3px solid black
浏览 6
提问于2016-06-24
得票数 1
回答已采纳
1
回答
剪辑路径: Firefox上的多边形
css
我用搜索我的问题,但我找不到任何类似的问题。我在Firefox上有CSS的问题。“剪辑路径:”没有显示。这是我的HTML和CSS代码。 .path { display: block; margin: auto; position: relative; -webkit-clip-path: polygon(0px 170px, 100% 0px,100% 650px,0px 900px); clip-path: polygon(0px 170px, 100% 0px,100% 650px,0px 900px); } <img src="http://www.value
浏览 1
提问于2015-12-26
得票数 1
回答已采纳
1
回答
CSS SVG剪辑路径定位-左下角开始
css
、
svg
、
clip-path
我有一个div,我正在应用svg剪辑路径。它基本上是在div的左侧放置一个一致的角度边缘。svg剪辑路径过大,因为它将应用于div的不同高度。 剪辑路径定位从div的顶部开始,因此它在侧面被剪掉了。剪辑路径是否可以从我的div的左下角开始,总是从div的左下角开始。 我目前的html是: <div class="box"> </div> <svg width="0" height="0"> <defs> <clipPath id="sideimgclip
浏览 6
提问于2022-10-25
得票数 0
回答已采纳
1
回答
可能有多个多边形吗?
css
、
polygon
、
css-shapes
、
clip-path
我想要创造一个金字塔。我想我应该用CSS clip-path来做这个。我的意思是做一个三角形(我设法做了)和它下面的几个梯形(即使是第一个失败)。 .container { min-width: 50%; max-width: 50%; } .triangle { background-color: yellow; clip-path: polygon(90% 100%, 50% 0%, 10% 100%); } .trapeze { background-color: blue; clip-path: polygon(0% 10%, 0% 90%, 0% 10
浏览 0
提问于2019-06-11
得票数 0
回答已采纳
2
回答
如何以较少的逗号传递参数
css
、
less
、
less-mixins
我有一个混合器,它采用形状的名称和坐标。我在想,如果坐标包含逗号,我将如何传递坐标? .clip-path(@shape @coords) { -webkit-clip-path: @shape(@coords); -moz-clip-path: @shape(@coords); clip-path: @shape(@coords); } .foo { .clip-path(polygon, 0 0, 0 100%, 100% 0); /* I am trying to achieve: clip-path: pol
浏览 2
提问于2016-03-07
得票数 2
回答已采纳
2
回答
剪辑路径更改时的悬停过渡
css
、
clip-path
在这段代码中,悬停效果正在工作,右下角消失但没有过渡,这是不是出了什么问题? .mydiv:hover{ background-color: blue; clip-path: polygon(0% 0%, 100% 0%, 80% 100%, 0% 100%); transition: 0.5s ease; }
浏览 7
提问于2019-02-23
得票数 2
2
回答
已加载页面上的CSS3转换
javascript
、
css
、
transition
我有这个CSS代码: <!-- language: css --> div.slider { transition: 2.5s cubic-bezier(.25,.77,.74,.24); clip-path: polygon(0 0, 1% 0, 1% 100%, 0% 100%); background-repeat: no-repeat; background-attachment: fixed; background-size: cover; backgr
浏览 2
提问于2017-06-12
得票数 0
1
回答
我在css中有一个剪贴类,它只在chrome中工作,而在firefox和中不工作,我如何修复它?
css
这里我用css搜索我的问题,但我找不到类似的问题。我在Firefox上有CSS的问题。“剪辑路径:”没有显示。 .clip { /* PLACE IN THE BEFORE AREA */ content:""; width: 100%; max-width: 100%; display: block; height: 100%; position: absolute; top: 0; left: 0; background-color: rgba(58, 60, 69, .6); -webkit-clip-path: polygon
浏览 5
提问于2017-05-20
得票数 0
回答已采纳
3
回答
使用HTML和CSS的SVG剪辑路径存在的问题
html
、
css
、
svg
、
clip
我一直试图了解如何将SVG剪辑路径应用于HTML元素,并且遇到了一些奇怪的情况。 这是小提琴: <div id="diamond1" class="diamond"> <div id="clip1"> <div></div> </div> </div> <div id="diamond2" class="diamond"> <div id="clip2">
浏览 0
提问于2013-12-07
得票数 2
3
回答
如何在Microsoft Edge上使用clip-path?
html
、
css
、
svg
、
microsoft-edge
、
clip-path
在为Firefox和Microsoft Edge(ME)制作剪贴头时,我使用了clip-path。它只需将clipPath元素放入SVG元素中,并将clip-path样式放入HTML元素中,即可在Firefox中工作。当我在我身上打开同样的代码时,它没有显示任何东西。 html,body,header { margin:0px; height:100%; font-family: Arial Unicode MS; } button:hover { transition:background-color 0.5s linear; } a:hover,li:hov
浏览 2
提问于2016-09-14
得票数 16
回答已采纳
1
回答
如何创建这样的形状?
css
、
sass
我如何用css创建它? ? 谢谢你的帮助。 我尝试过的: .box { background: purple; padding: 20px; clip-path: polygon( 70% 100%, 100% calc(100% - 3vw), 100% 0, 0 0, 0 calc(100% - 3vw) ); } <div class="box"></div>
浏览 8
提问于2021-05-08
得票数 2
回答已采纳
1
回答
使文本框出现在包装器/剪辑路径的右侧。
html
、
css
我已经将我的代码建立在codepen:的CSS形状布局金字塔中。 我对金字塔的形状很满意,但当你在元素上方盘旋时,我也希望在每个金字塔步骤的右边出现一个文本框。我的文本框代码基于 但是,正如您所看到的,文本框出现在包装器/金字塔中,而不是在它之外。文本框中的文本将是相当长的,因此它不能在金字塔内。我怎样才能让它走到外面(最好是在金字塔的右边)? 我对CSS/HTML非常陌生,但我正在努力学习--希望有人能帮助我:) body { /*background: #333; font-family: "SF UI Text", "Avenir", "
浏览 7
提问于2021-12-10
得票数 2
2
回答
css clip-路径仅悬停在形状上
javascript
、
html
、
css
在我的代码中可以看到,有两个灰度形状。现在只能悬停两者中的一个,因为原始大小是一个框,并且重叠了两个图像。但是,有没有一种方法可以在悬停时识别出它的形状?Z索引不会导致结果...希望你能帮我一点忙!没有JS会很棒,但它不是k.o。 html: <div id="one"> <img src="https://cdn.pixabay.com/photo/2019/01/19/15/53/ice- 3941906_1280.jpg"> </div> <div id="two"> <img sr
浏览 0
提问于2019-03-06
得票数 0
1
回答
内嵌css剪辑- Chrome上不受尊重的路径
css
、
google-chrome
、
clip-path
我正在制作一些动画和图形库来使用html。对于某些情况,需要裁剪,并且由于元素是动态生成的,因此在元素的样式属性中添加了动态: el.style.clipPath = 'polygon(..)'; Firefox (76)工作正常,但是Chrome (83) (以及Opera )不尊重clip-path属性(在铬元素检查中,它甚至没有显示在元素的样式属性上) 在第64版之前,它应该是Chrome中的一个bug,但无论我看哪,它都说最新的chrome (以及webkit浏览器)特别支持clip-path和polygon。 备注:使用svg路径的url测试并不是一个问题,但我想避免
浏览 2
提问于2020-05-20
得票数 2
回答已采纳
1
回答
jquery -平滑修改css剪辑路径
jquery
、
css
、
mousemove
、
clip-path
我有一个依赖于光标位置的css clip-path.元素(Xcord) jquery modify clip-path points。 我的代码运行得很好,但我想放慢(缓慢和平滑)这个“动画”,即使光标移动得很快。 我怎样才能做到这一点呢?thx请求帮助 $(document).mousemove(function(getCurrentPos){ var clip = $(".element"); //x coordinates var xCord = getCurrentPos.pageX; //calculate % xPercent = xCor
浏览 20
提问于2019-01-28
得票数 0
回答已采纳
1
回答
我可以在CSS中将div元素与剪切的路径重叠,而不掩蔽子div吗?
html
、
css
我正在尝试使用CSS创建两个梯形,并将它们叠加在另一个之上。问题是,当我使用clip-path属性时,它会自动屏蔽它下面的另一个div。有没有什么方法可以让我在div元素中不使用绝对定位的情况下创建一个类似于附加图像的背景图像? 到目前为止,我所做的一个例子: .bg1 { background-color: #ff0000; padding: 100px 0; clip-path: polygon(0 18%, 100% 0, 100% 90%, 0 100%); } .bg2 { background-color: #3f3f3f; padding: 100px
浏览 14
提问于2021-02-03
得票数 1
回答已采纳
1
回答
JS:在图像的左右侧弯曲高度
javascript
、
image
、
crop
、
shrink
我想找个图书馆(或者其他方法)。这帮了我..。 我最初在这里有这样的图片: 但是我想给用户一个改变左边图像的可能性,就像这样. 在右边,像这样 在右边是这样的: 我在这里查阅过这些文章: 这是一个工具,用户可以选择他的刷子的大小,他以后会订购.因此,刷子左右两侧的锥形尺寸应该是可能的。 我不知道,也许我必须使用画布对象,但也许我可以通过编程找到一种解决方案,改变一些css样式,以裁剪图像或缩小图像(但我认为缩小/弯曲图像确实很好) 寻求任何帮助或暗示! 问候 亚历克斯 编辑: 我在这里找到了一个改变作物坐标的方法: -webkit-clip-path: pol
浏览 1
提问于2018-04-13
得票数 1
1
回答
我想摆脱这个CSS中重复的代码。
html
、
css
我有下面的3个导航-条目,我为它们做了一个CSS设计,但是我必须在“id”之后选择每个“导航-项”,因为第一个“导航-项”的设计与其他的2不同。我能摆脱重复的代码,但仍然在第一个‘导航-项’保持这个设计吗? .nav { width: 100%; } .nav-item { width: 30%; text-align: center; } .nav-link { background-color: #F3F4F5; color: black; font-family: "Times New Roman", Times, serif; } #p
浏览 2
提问于2021-12-02
得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属
10元无门槛券
手把手带您无忧上云
相关
资讯
CSS3 clip-path 用法介绍
CSS文字特效-裂开吧
奇舞周刊第 246 期:无障碍设计&前端数据流哲学
CSS中冷门却十分有用的calc
5个你可能不知道的CSS属性
热门
标签
更多标签
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
活动推荐
运营活动
广告
关闭
领券