css-shapes 相关问题

CSS-Shapes是通过使用Cascade Styling Sheets将HTML元素制作成形状和图像而制作的。最基本的形状包括三角形，正方形和圆形，但可以制成更高级的形状，如心形，八边形和星形。

是否可以将div样式设置为梯形？

我知道有可能倾斜，但我没有找到一种方法以特定的角度倾斜每个角。这是我正在从事的项目：http://map.ucf.edu/ 特别查看...

css css-transforms css-shapes

回答 3 投票 0

将 div 的右侧设为箭头

我在页面上有一个简单的div：一些文字是否可以使用 CSS 使其完成为箭头。像这样的东西：更新这是我在 web-tiki 中看到的结果

html css css-shapes

回答 8 投票 0

CSS 中从顶部 0% 到底部 100% 的透明（不透明度）图像

可以吗？就在 CSS 中，就像这张图片一样，所以我的意思是，如果我放置标签背景图像，我需要它从上到下是透明的。我想创建类似于的东西有可能做到吗？就在CSS中，就像这张图片一样，所以我的意思是如果我放上<div>标签背景图像，我需要它从上到下是透明的。我想创建类似于下图的东西：正如其他答案所述：在 CSS 中不可能使图像从上到下透明。但是如果您有纯色背景色（或类似颜色），您可以使用 CSS3 内嵌框阴影来模拟透明度。对于图像白色覆盖和半透明黑色矩形。在下面的演示中，我使用伪元素来最小化 HTML 标记。演示输出： HTML： <div class="image"></div> CSS： .image{ position:relative; height:500px; width:500px; margin:50px auto; background: url('http://lorempixel.com/output/people-q-c-640-480-8.jpg'); background-size:cover; -moz-box-shadow: inset 0px 850px 500px -500px #fff; -webkit-box-shadow: inset 0px 850px 500px -500px #fff; -o-box-shadow: inset 0px 850px 500px -500px #fff; box-shadow: inset 0px 850px 500px -500px #fff; } .image:before,.image:after{ content:''; position:absolute; left:5%; opacity:0.5; } .image:before{ top:0; width:20%; height:100%; -moz-box-shadow: inset 0px 850px 500px -500px #000; -webkit-box-shadow: inset 0px 850px 500px -500px #000; -o-box-shadow: inset 0px 850px 500px -500px #000; box-shadow: inset 0px 850px 500px -500px #000; } .image:after{ width:20%; height:10%; top:100%; background:#000; } 其实，你可以在 webkit 中做到这一点！ Mozilla 允许使用 SVG 蒙版，但我不会深入讨论。 IE 零支持。演示：JSFiddle HTML： <div> <img src="http:/www.fillmurray.com/300/200"/> </div> CSS： div { -webkit-mask-size: 300px 200px; -webkit-mask-image: -webkit-gradient(linear, center top, center bottom, color-stop(0.00, rgba(0,0,0,0)), color-stop(1.00, rgba(0,0,0,1))); } 参考：http://caniuse.com/css-masks 我做了一把小提琴供你使用。您必须将渐变与 rgba 一起使用。并非所有浏览器都支持此功能，因此您可能想要操作图像。然而，这是在 CSS 中做到这一点的唯一方法。这是代码： HTML： <html> <head> </head> <body> <img src="http://upload.wikimedia.org/wikipedia/meta/6/6d/Wikipedia_wordmark_1x.png" /> <div class="whatever"></div> </body> </html> CSS： body { margin:0px; } img { height:30px; position:relative; } .whatever { background-image: -webkit-gradient( linear, left top, left bottom, color-stop(0, #ff00ff), color-stop(1, rgba(0,0,0,0)) ); background-image: -o-linear-gradient(bottom, #ff00ff 0%, rgba(0,0,0,0) 100%); background-image: -moz-linear-gradient(bottom, #ff00ff 0%, rgba(0,0,0,0) 100%); background-image: -webkit-linear-gradient(bottom, #ff00ff 0%, rgba(0,0,0,0) 100%); background-image: -ms-linear-gradient(bottom, #ff00ff 0%, rgba(0,0,0,0) 100%); background-image: linear-gradient(to bottom, #ff00ff 0%, rgba(0,0,0,0) 100%); height:30px; position:relative; width:100px; top:-34px; } 您应该使用 background CSS 属性以及您自己设置的 linear-gradient 值来满足您的需求。 CSS background: linear-gradient(to bottom, rgba(255,255,255,1) 30%,rgba(0,0,0,0) 100%); 检查这个演示jsFiddle示例我认为根本不可能准确地重现这一点（特别是如果图像的顶部实际上是透明的）。如果您只需要从白色到图像的“透明度”...那就更容易了.. JSfiddle 演示 HTML <div class="wrapper"> <div class="imgwrap"> <img src="http://lorempixel.com/output/nature-q-c-200-200-2.jpg" alt=""/> </div> </div> CSS body { background-color: #bada55; } .wrapper { height:240px; display: inline-block; margin: 25px; border:1px solid grey; background-color: white; padding:8px; } .imgwrap { display: inline-block; position: relative; } .imgwrap:after { position: absolute; content:""; top:0; left:0; width:100%; height:100%; background: linear-gradient(rgba(255,255,255,1) 35%, rgba(255,255,255,0) 100%); z-index:1; } 使用绝对位置和 z 索引在图像上叠加渐变 div： CSS section{ margin:0px 0px; padding:0px 0px; width: 300px; display:block; height: auto; position:relative; } section #overlay{ position:absolute; top:0; left:0; right:0; background: -webkit-linear-gradient(top, rgba(0,0,0,0), rgba(255,255,255,1)); /* For Safari 5.1 to 6.0 */ background: -o-linear-gradient(bottom, rgba(255,255,255,0), rgba(255,255,255,1)); /* For Opera 11.1 to 12.0 */ background: -moz-linear-gradient(bottom, rgba(255,255,255,0), rgba(255,255,255,1)); /* For Firefox 3.6 to 15 */ background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,1)); /* Standard syntax (must be last) */ width:100%; height:100%; z-index:2; } section #imgContainer{ width: 300px; height: auto; margin: 0px 0px; padding: 0px 0px; overflow: hidden; display: inline-block; } section #imgContainer img{ width: 300px; padding: 0; margin: 0; display: block; } HTML <section> <div id="overlay"> </div> <div id="imgContainer"> <img src="" /> </div> </section> 很老的讨论，但最近提出了同样的问题。您只需要创建 2 个容器。外部容器应包含您的背景图像，内部容器将包含渐变（在本例中为白色到透明）： .outer-container { min-height: 100vh; width: 100%; background-image: url('/images/home_bg.png'); background-size: cover; } .inner-container { min-height: 100vh; width: 100%; background: linear-gradient( 150deg, rgba(255, 255, 255, 0.996) 50%, rgba(255, 255, 255, 0) 100% ); } div 结构将是这样的： <div class="outer-container"> <div class="inner-container"> </div> </div>

image css opacity css-shapes

回答 7 投票 0

如何创建带有渐变的曲线？

我试图在div的中间插入一条曲线，这样我就可以达到这个结果：这就是我到目前为止所做的。。后退{ 背景颜色：灰色；宽度：100%；高度：200px；显示：内联...

html css css-shapes

回答 2 投票 0

创建笑脸并添加表情

这里我使用 CSS 创建了三个笑脸。小提琴 - 演示应该表达快乐（就在那里）：☻ 应该表达悲伤：☻?? 嘘...

html css shapes css-shapes

回答 4 投票 0

如何在 CSS 中创建丝带形状

http://jsfiddle.net/6HyjZ/ .bookmarkRibbon { 宽度：0；高度：100px；右边框：50px 纯蓝色；左边框：50px 纯蓝色； border-bottom: 30px 实心透明; } http://jsfiddle.net/6HyjZ/ .bookmarkRibbon { width: 0; height: 100px; border-right: 50px solid blue; border-left: 50px solid blue; border-bottom: 30px solid transparent; } <div class="bookmarkRibbon"></div> 我正在努力制作这种形状的版本，其中丝带指向右侧而不是向下，我怎样才能实现这个目标？使用CSS的丝带形状剪辑路径: .bookmarkRibbon { width: 100px; height: 60px; background: blue; clip-path: polygon(0% 0%, 100% 0%, calc(100% - 20px) 50%, 100% 100%, 0% 100%); } <div class="bookmarkRibbon"></div> 向下指： .bookmarkRibbon { width: 60px; height: 100px; background: blue; clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 50% calc(100% - 20px), 0% 100%, 0% 0%); } <div class="bookmarkRibbon"></div> 使用 CSS 的丝带形状 border 帮助您逐步可视化逻辑，以便您可以轻松地将其应用到任何一侧： .bookmarkRibbon { border: 30px solid blue; /* All borders set */ border-left: 0; /* Remove left border */ border-right: 20px solid transparent; /* Right transparent */ width: 100px; /* Increase element Width */ } <div class="bookmarkRibbon"></div> 使用这里有用的已接受答案是文本版本。垂直（从上到下）带有文字的横幅 .ribbon-vertical { position: absolute; right: 10px; border: 13px solid #e46a76; /* All borders set */ border-top: 0; /* Remove left border */ border-bottom: 10px solid transparent; /* Right transparent */ height: auto; /* Increase element Width */ width: 0; word-wrap: break-word; color: white; z-index: 1; -webkit-filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3)); filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3)); } .ribbon-vertical div{ position: relative; right: 5px; padding-top: 2px; padding-bottom: 2px; } <div class="ribbon-vertical"><div>BANNER</div></div> 带有文字的水平（从右到左）横幅 .ribbon-horizontal{ position: absolute; right: 0; bottom: 5rem; border: 13px solid #e46a76; border-right: 0; border-left: 10px solid transparent; height: 0; line-height: 0; width: 100px; color: white; z-index: 1; -webkit-filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3)); filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3)); letter-spacing: 3px; } .ribbon-horizontal span{ position: relative; padding: 0 4px 0 10px; text-align: center; } <div class="ribbon-horizontal"><span>BANNER</span></div> .bookmarkRibbon{ width:100px; height:0; border-bottom:50px solid blue; border-top:50px solid blue; border-right:30px solid transparent; } 如果您“旋转”CSS 属性，它会将表单旋转 90 度。 .bookmarkRibbon{ width:100px; height:0; border-bottom:50px solid blue; border-top:50px solid blue; border-left:30px solid transparent; } http://jsfiddle.net/6HyjZ/6/ 使用transform:rotate： .bookmarkRibbon{ width:0; height:100px; border-right:50px solid blue; border-left:50px solid blue; border-bottom:30px solid transparent; transform:rotate(7deg); -ms-transform:rotate(7deg); /* IE 9 */ -webkit-transform:rotate(7deg); /* Opera, Chrome, and Safari */ } 只需交换你拥有的东西即可开始jsfiddle： .bookmarkRibbonRight{ width:100px; height:0px; border-right:30px solid transparent; border-bottom:50px solid blue; border-top:50px solid blue; } 你已经有了形状，只需使用变换属性来改变它的角度。这是我添加到您的代码中的代码。 transform: rotate(270deg); 这是小提琴，http://jsfiddle.net/6HyjZ/11/它现在指向右侧（除非那是右侧right侧）使用 rotate css 转换： .bookmarkRibbon{ width:0; height:100px; border-right:50px solid blue; border-left:50px solid blue; border-bottom:30px solid transparent; -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); } http://jsfiddle.net/6HyjZ/13/

html css css-shapes

回答 8 投票 0

有什么方法可以仅在悬停时对图像的一部分进行着色吗？

我很想用 HTML、CSS 甚至 jQuery 编写简单的图像绘制代码。假设我有一个原始图像，我想让它着色，但仅限于悬停的一部分（或 10x10px 正方形或 ci...

javascript html css css-shapes

回答 5 投票 0

如何防止倾斜的div元素中内容溢出？

我遇到了一个问题，文本延伸到倾斜的 div 之外。我设法拉直段落内的文本，但这导致文本从 div 溢出。 .leftStyle {

html css frontend css-shapes skew

回答 1 投票 0

使用 CSS3 使 Div 元素遵循弯曲路径

所以基本理念是在一张弧形桌子上设置 1 - 9 个座位，就好像您通过第一人称视角观看它们一样。我正在尝试获取 div 元素，这些元素将成为在另一个元素外部流动的座位...