css-shapes 相关问题

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

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 元素，这些元素将成为在另一个元素外部流动的座位...