CSS透视图:在容器边界内适应梯形

文章/答案/技术大牛

发布

1回答

javascript、css、webkit-perspective

我有这个代码片段，它使用CSS将整个页面的<canvas>元素放入45度透视图中。50vw;} <canvas></canvas> 我如何确保整个画布保持在页面的边界内(梯形的底部应该与页面具有完全相同的宽度)，同时保持透视效果？CSS或JavaScript解

浏览 9提问于2018-08-12得票数 0

1回答

如何将SVG (或CSS)中的图像转换为非平行四边形形状？

css、image、svg、transform

我希望能够创建一个SVG，其中有一个(正常的)图像在背景和一个不同的较小的图像某处，有4个“边”移动，以创建一个非矩形的形状。思考类似的图像扭曲，以创建一个透视视图。我发现一些CSS透视图，但它使用X，Y，Z，当我真的只需要适应(扭曲)一个预定义的非平行边“框”图像。

浏览 2提问于2014-11-24得票数 1

回答已采纳

1回答

带边框和居中文本的透明梯形按钮

html、css、css-shapes、css-transforms

我在设计一个梯形是关键的地方。我正在使用下面的代码来实现我想要的效果，但是它有问题： .prodcaptions { width:136px;

浏览 4提问于2014-10-13得票数 3

2回答

与容器相邻的渐变CSS形状

html、css、bootstrap-4、linear-gradients

标题需要在其上方的平行四边形形状，在容器的右侧需要一个梯形，如下所示。我成功地将平行四边形添加到容器的上方，但我很难将元素放在容器的右侧。以下是我所做的事情。container"> <div class="col"> </div> </div&g

浏览 7提问于2020-09-23得票数 1

回答已采纳

1回答

基于4x4矩阵计算画布context.setTransform矩阵

javascript、canvas、matrix、3d

在这把小提琴中，我一直在操纵几个角度(表示一个具有两个自由度的3d相机的旋转)来计算setTransform矩阵的剪切项，但我真的无法清楚地了解到理想的过程。

浏览 2提问于2014-07-03得票数 0

2回答

如何在旋转木马中显示肖像和景观图像？

javascript、html、jquery、css

我有肖像画和风景图，还有CSS： max-height: 80%; display:block;我在中尝试过这些解决方案，但没有结果。我暂时解决了这个问题，只包括景观图像()。如何将肖像图像包括在旋转木马中？

浏览 8提问于2020-06-17得票数 0

回答已采纳

1回答

如何在OpenGL中创建2D“透视”/trapezoid视图？

opengl、2d

在OpenGL中绘制二维视图很简单:只需使用GLOrtho。但据我所知，这总是会给你一个矩形的视图。但是如果你想要一个稍微复杂一点的观点呢？假设我有一个比我的视窗大得多的地图，我想把它画成一个透视梯形视图，在这个视图中，底部(近)边比远侧窄。但我仍然希望一切都是2D的。我正在寻找的效果类型的基本图示:最终幻想4的飞艇视图有人知道怎么设置吗？假设，只是

浏览 4提问于2012-03-21得票数 0

2回答

绘制一个反锯齿梯形图

graphics、antialiasing

我试图画一个反别名的梯形线，从顶部开始，逐行绘制。当直线不是整数像素数时，结束像素是背景灰度和梯形灰度的加权平均值，例如，如果一条线长为128.5像素，则每一端的灰度为： 0.25\*(trapezoid\_greylevel)+0.75\*(background

浏览 6提问于2012-01-05得票数 2

回答已采纳

3回答

使用CSS对齐div以填充父容器的宽度

jquery、html、css

我有一个容器宽度为100%的页面，所以它是整个屏幕的宽度，我在一个网格结构中有几个DIVs，它们都是浮动的:左边没有设置宽度，只有10px的边距。有没有一种方法，使用CSS或jQuery，让div填充整个宽度，并对齐自己以适应间隙，因此边距会根据屏幕大小而变化。

浏览 3提问于2011-08-14得票数 20

回答已采纳

1回答

我正在尝试创建一个梯形的div形状，并希望将文本放置在中心。我目前有一个顶部边框形状像梯形的div。这样做的问题是文本位于div的中心，而不是梯形的中心。我可以改变页边距并手动将文本放在中间，但这太麻烦了，需要布局来响应不同的屏幕大小。我想把div的主体做成梯形，这样就可以很容易地将文本居中。我在网上到处寻找如何做到这一点，但所有的答案都有相同的方法，只是将顶部或底部的边界设置为梯形。import

浏览 23提问于2019-10-29得票数 1

回答已采纳

1回答

Google Chart API突破iPhone容器

iphone、css、responsive-design、google-visualization

一切都运行得很好，在其他测试设备上的伸缩性也很好，但由于某种原因，当在iPhone上查看时，谷歌的“表格”图表正在打破它的容器。Chart是通过一个iFrame加载的，并被缩放以适应宽度: 100%的容器，这是Dreamweaver的“流体网格布局--网格容器”元素。柱状图和折线图都可以正确地缩放到100%，但表格会增长到适合所有内容，然后脱离网格容器。这是将图表绘制到页面的php/html代码。

浏览 1提问于2012-12-25得票数 1

1回答

如何删除画布元素周围的所有空间？

html、css、html5-canvas、spacing

DOCTYPE html><head> <title>Document我在这个项目的第一个版本中使用了相同的CSS，出于原因我需要删除它，它运行得很好。

浏览 1提问于2020-08-14得票数 0

回答已采纳

1回答

如何设置8.5x11英寸打印页面的CSS格式

css、templates、printing

我正在寻找帮助设置的初始DIV，将适合在信纸的边界内。我将循环查找动态页面内容，每个页面都以` page -break-after；always；结束。我一直在使用试错的方法，现在已经用完了可以试用的纸张。谢谢!

浏览 0提问于2010-11-17得票数 21

回答已采纳

1回答

杂波:透视、倾斜和矩阵

clutter、gnome-shell-extensions、gjs

是否有办法更改给定容器或小部件的杂乱透视图？最后，有人知道为什么不推荐剪辑路径吗？这

浏览 4提问于2019-12-19得票数 1

1回答

在css中创建一个自适应四边形梯形

css、svg、internet-explorer-9、css-shapes

是否可以在css中创建图像形状？在过去的一周里，我在谷歌上搜索的次数比我想承认的要多，但没有找到解决办法。我已经能够半复制它，但还没有得到所有的要求。有一条边界一次尝试我使用了多个剪辑路径，但在IE中失败了。<div class="clip-block"> <div class="

浏览 1提问于2015-05-14得票数 3

回答已采纳

7回答

Div填充整个屏幕宽度

html、css

我一直在尝试给我的网站添加一个页眉，但我无法让容器适应整个屏幕的宽度，尽管宽度被设置为100%或auto。它总是在左边和右边都有大约5px的边距，即使边距和填充都设置为0。> <p>Lorem Ipsum</p> </h7> &l

浏览 2提问于2012-08-01得票数 7

回答已采纳

1回答

CSS3梯度应用于HTML中的梯形图

html、css、transform、masking

我想在HTML5做一个梯形图。solid transparent; height: 0;}-webkit-transform: skew(20deg);

浏览 3提问于2013-03-19得票数 8

1回答

Css3透视图-属性在IE10中不起作用

css、css-transforms、perspective、internet-explorer-10

我尝试在IE10中制作翻页效果。perspective: 1000px;看看它的jsfiddle：

浏览 0提问于2012-11-20得票数 3

回答已采纳

2回答

禁用md-input-container验证角度2

css、angular、angular-material2

当我将属性required添加到我的<input>中时，我得到了如下结果：我想要的是第二个红色边距，即input标记的边距，而不是属于md-input-container的第一个边距。有没有办法禁用其中一个边距？<button type="submit" md-raised-button color="accent" class="pull-right">{{title}}</button> </

浏览 16提问于2017-06-28得票数 0

1回答