堆栈内存溢出
  简体   繁体   English

如何制作具有超过 4 个角的 div

[英]How can I make a div having more than 4 corners

 原文  2016-10-06 06:35:10  5   8    html/ css/ css-shapes

问题描述

I have to make a div using HTML and CSS only but not using any background image with more than 4 corners.我必须只使用 HTML 和 CSS 制作一个div ，但不能使用任何超过 4 个角的背景图像。

我不想用 html 和 css 做这件事

How can I do it?我该怎么做？

8 个解决方案

解决方案1
 15  2016-10-06 06:51:06

You can use pseudo-element and some css shape tricks to achieve this.您可以使用pseudo-element和一些 css 形状技巧来实现这一点。 

 .folder { width: 190px; height: 110px; background: #888; position: relative; overflow: hidden; } .folder:after { content: ""; width: 100px; border: 15px solid transparent; position: absolute; right: -15px; border-top-color: #fff; top:0; }
 <div class="folder"></div>

解决方案2
 10  2016-10-06 06:45:24

There are two examples of code: with CSS ( + animation ) and SVG .有两个代码示例：使用CSS ( + animation ) 和SVG 。

With animation带动画

 * { box-sizing: border-box; } html, body { margin: 0; padding: 0; position: relative; width: 100%; height: 100%; background-color: #2196f3; } .page { height: 100%; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -moz-box-align: center; -webkit-box-pack: center; -webkit-justify-content: center; justify-content: center; -moz-box-pack: center; -ms-flex-pack: center; } .folder { background-color: #d3eafd; position: relative; width: 92px; height: 64px; display: block; border-top-right-radius: 8px; border-bottom-right-radius: 8px; border-bottom-left-radius: 8px; } .folder-tab { position: absolute; height: 10px; left: 0; bottom: 100%; display: block; width: 40%; border-top-left-radius: 8px; background-color: inherit; } .folder-tab:after { content: ''; position: absolute; display: block; top: 0; left: calc(100% - 10px); border-bottom: 10px solid #d3eafd; border-left: 10px solid transparent; border-right: 10px solid transparent; } .folder-icn { padding-top: 12px; width: 100%; height: 100%; display: block; } .downloading { width: 30px; height: 32px; margin: 0 auto; position: relative; overflow: hidden; } .custom-arrow { width: 14px; height: 14px; position: absolute; top: 0; left: 50%; margin-left: -7px; background-color: #fff; -webkit-animation-name: downloading; -webkit-animation-duration: 1.5s; -webkit-animation-iteration-count: infinite; animation-name: downloading; animation-duration: 1.5s; animation-iteration-count: infinite; } .custom-arrow:after { content: ''; position: absolute; display: block; top: 100%; left: -9px; border-top: 15px solid #fff; border-left: 16px solid transparent; border-right: 16px solid transparent; } .bar { width: 30px; height: 4px; background-color: #fff; margin: 0 auto; } @-webkit-keyframes downloading { 0% { top: 0; opacity: 1; } 50% { top: 110%; opacity: 0; } 52% { top: -110%; opacity: 0; } 100% { top: 0; opacity: 1; } } @keyframes downloading { 0% { top: 0; opacity: 1; } 50% { top: 110%; opacity: 0; } 52% { top: -110%; opacity: 0; } 100% { top: 0; opacity: 1; } }
 <div class="page"> <div class="folder"> <span class="folder-tab"></span> <div class="folder-icn"> <div class="downloading"> <span class="custom-arrow"></span> </div> <div class="bar"></div> </div> </div> </div>

SVG SVG 

 <!DOCTYPE html> <html> <body> <svg height="32px" version="1.1" viewBox="0 0 32 32" width="32px" xmlns="http://www.w3.org/2000/svg" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns" xmlns:xlink="http://www.w3.org/1999/xlink"><title/><desc/><defs/><g fill="none" fill-rule="evenodd" id="Page-1" stroke="none" stroke-width="1"><g fill="#157EFB" id="icon-94-folder"><path d="M17,11 L15,7 L4.00276013,7 C2.89666625,7 2,7.88967395 2,8.991155 L2,27.008845 C2,28.1085295 2.89971268,29 3.99328744,29 L29.0067126,29 C30.1075748,29 31,28.1073772 31,27.0049107 L31,12.9950893 C31,11.8932319 30.1029399,11 28.9941413,11 L17,11 Z" id="folder"/></g></g> </svg> </body> </html>

Helpful links:有用的链接：

解决方案3
 5  2016-10-06 06:40:46

 div { width: 280px; height: 280px; background: #1e90ff; -webkit-clip-path: polygon(48% 13%, 100% 13%, 100% 60%, 100% 100%, 0 100%, 0 0, 29% 0); clip-path: polygon(48% 13%, 100% 13%, 100% 60%, 100% 100%, 0 100%, 0 0, 29% 0); } /* Center the demo */ html, body { height: 100%; } body { display: flex; justify-content: center; align-items: center; }
 <div></div>

解决方案4
 4  2016-10-06 07:16:16

With only a single block level element, you may style a :before pseudo-element to create the slanted tab above the containing <div> .只有一个块级元素，您可以设置:before伪元素的样式以在包含的<div>上方创建倾斜的选项卡。 

 div { margin: 40px; width: 150px; height: 80px; background: red; position: relative; padding: 10px; color: #fff; } div:before { content:""; position: absolute; left: 0; top: -20px; width: 70px; height: 0; border-bottom: 20px solid red; border-right: 20px solid transparent; }
 <div>content</div>

Nb: This should have a better support on older browsers (and IE) than using a clip-path solution.注意：与使用剪辑路径解决方案相比，这应该对旧浏览器（和 IE）有更好的支持。

解决方案5
 1  2016-10-06 23:50:46

Just another way of doing it using the "canvas" of HTML5:使用 HTML5 的“画布”的另一种方法： 

 <div> <canvas id="cnv" height="200" width="400"></canvas> <script> var canvas = document.getElementById('cnv'); if (canvas.getContext) { var ctx = canvas.getContext('2d'); ctx.beginPath(); ctx.moveTo(0, 0); ctx.lineTo(100, 0); ctx.lineTo(130, 25); ctx.lineTo(200, 25); ctx.lineTo(200, 125); ctx.lineTo(0, 125); ctx.closePath(); ctx.fillStyle = "gray"; ctx.fill(); } </script> </div>

解决方案6
 1  2017-07-15 19:44:36

You can achieve this using single element and two gradients (one gradient for rectangle, another is for tab):您可以使用单个元素和两个渐变来实现这一点（一个渐变用于矩形，另一个用于选项卡）： 

 div { width: 280px; height: 200px; background: linear-gradient(to bottom, transparent 31px, #656d78 31px), linear-gradient(-135deg, transparent 32%, #656d78 32%); }
 <div></div>

Also this can be achieved via single gradient (for tab) using pseudoelement:这也可以通过使用伪元素的单个渐变（用于选项卡）来实现： 

 div { width: 280px; height: 169px; background-color: #656d78; margin-top: 39px; position: relative; } div:after { content: ""; position: absolute; top: -31px; left: 0; width: 100%; height: 31px; background: linear-gradient(-135deg, transparent 50%, #656d78 50%); }
 <div></div>

解决方案7
 0  2016-10-06 06:42:23

If you can insert code, you could use a SVG graphic.如果可以插入代码，则可以使用 SVG 图形。

If not, you could draw the vector graphic css clip-path as the answer above.如果没有，您可以绘制矢量图形 css clip-path作为上面的答案。 There are some generators, here is one I've found有一些生成器，这是我找到的一个

Another option is to use at least 3 divs, skew one using css transform in one of them and locating each one using relative os absolute positioning.另一种选择是使用至少 3 个 div，在其中一个使用 css transform倾斜一个，并使用相对 os 绝对定位来定位每个 div。

解决方案8
 0  2020-02-06 11:25:10

You can make polygon's div using CSS.您可以使用 CSS 制作多边形的 div。

.myDiv {
  -webkit-clip-path: polygon(48% 16%, 100% 16%, 100% 100%, 0% 100%, 0 0, 32% 0);
  clip-path: polygon(48% 16%, 100% 16%, 100% 100%, 0% 100%, 0 0, 32% 0);
}

Or you can create any type of polygon shape (online) using this website或者您可以使用此网站创建任何类型的多边形形状（在线）

https://www.cssportal.com/css-clip-path-generator/https://www.cssportal.com/css-clip-path-generator/

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 超过四个角的div - div with more than four corners 如何使div元素移动超过200像素？ - How can I make my div element move more than 200px? 如何制作带圆角的div - How to make a div with rounded corners 我如何在 html 中制作一个表格，第一行只有 1 列，其他行超过 1 - How do i make a table in html with first row having 1 column only and other rows having more than 1 如何将div优先于另一个 - How can I prioritise a div more than another one 如何在HTML表中创建多个列？ - How can I make more than one column in an HTML table? 如何使 div 不大于其内容？ - How can I make a div not larger than its contents? 如何将外圆角添加到div？ - How can I add outer rounded corners to a div? 如果我有多个div，如何在页面中间放置一个div？ - How can I put a div in the middle of the page if I have more than one div? 如何在非CSS3浏览器上制作圆角？ - How can I make rounded corners on non-CSS3 browsers?
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM