What is the technique for creating a white/green Container made of Polygons using CSS / CSS3?
What is the technique for creating a white/green Container made of Polygons using CSS / CSS3?
If you want to create a simple SVG path, you can do so easily.
Check out this example on CodePen
<svg width="300px" height="100px" version="1.1" xmlns="http://www.w3.org/2000/svg">
<path d="M5 5 L170 3 L295 15 L280 95 L130 80 L110 95 L20 85" stroke="transparent" fill="#8eab32"></path>
</svg>
Mx y denotes the first set of coordinates;Lx y represents a straight line from the previous coordinates to (x, y).(If you need more details on using the path element, visit MDN)
Result:
You can also include text or HTML within the SVG by utilizing the
<foreignObject>...</foreignObject><svg width="300px" height="100px" version="1.1" xmlns="http://www.w3.org/2000/svg">
<path d="..."></path>
<foreignObject width="100%" height="100%">
<a href="#">noch 356 tage</a>
</foreignObject>
</svg>
Also, applying some basic CSS:
svg {
line-height: 100px;
text-align: center;
}
svg a {
color: #fff;
font: 36px "Indie Flower";
text-decoration: none;
}
Here is the final outcome: http://codepen.io/anon/pen/QbMEeW
Additionally, you can transform the SVG with some CSS, for example:
svg {
transform: scale(.6) rotateZ(-2deg);
}
This will give your SVG a similar appearance to the one shown in your example.
One way to achieve this effect is by using a clip path, although browser support may vary:
body {
height: 100%;
background: #222;
}
div {
height: 100px;
width: 200px;
line-height: 100px;
text-align: center;
background: rgb(180, 255, 50);
-webkit-clip-path: polygon(0 5%, 60% 0, 100% 20%, 98% 100%, 50% 85%, 40% 100%, 5% 90%);
}<div>This is clipped</div>For more information, you can check out:
Alternatively, you can create a similar shape using SVG:
html,
body {
background: gray;
}<svg version="1.0" xmlns="http://www.w3.org/2000/svg" width="400px" height="200px" viewBox="0 0 100 100">
<g fill="green" stroke="black">
<path d="M 0 5, 60 0, 100 20, 98 100, 50 85, 40 100, 5 90z" />
</g>
</svg>Note: I am still learning SVG myself, so some adjustments to values might be necessary.
Struggling with expanding li elements to match the container width? Despite tweaking individual widths and Flexbox properties, the desired outcome remains elusive. How can the width of each li be adjusted to align with the container, mirroring the dimensio ...
Currently, I am utilizing the react material-table and looking to implement a more visually appealing scroll-bar instead of the default Pagination option. Although I have experimented with the react-custom-scroll package, it has not produced the desired ...
I am attempting to align a div directly beside the text being entered in a text input field. It seems logical to me that this could be achieved by measuring the length of the input value and positioning the div accordingly. However, the issue I am facing i ...
Apologies in advance if this has already been addressed, but I have tried solutions from other sources without success. My Objective: I aim to set the minimum height and width of a div based on the current dimensions of the document. This should trigger ...
I have successfully set up a few buttons that can show and hide divs on click. However, I am wondering if it is possible to hide all other divs when one is showing, and also have "divone" show up on load. Buttons: <button class="btn btn-outline-primar ...
How can I use JavaScript to toggle between classes? I can't seem to understand why an element that is set to display: none; is unable to receive a class using classList. In simpler terms, if I define #div1{ width: 25%; background-color: #000000; ...
Is there a way to compare and copy different information from CSS files into another file? For instance, if I have two CSS files named a.css and b.css, is there a method to automatically select and copy only the differences between the two files? Thank y ...
As a newcomer to Vuetify, I am still learning the ropes. One thing I've noticed is that <v-main> automatically expands to fill the space between <v-app-bar> and <v-footer>, taking up the entire viewport height. My concern arises wh ...
After many attempts to implement smooth scrolling on my Bootstrap project, I have tried numerous Youtube tutorials and Google search results without any success. The latest attempt I made was following this Stack Overflow post Smooth scrolling when clickin ...
Having some issues with my code. When I click a button, the plan is for the pictures to change one by one to simulate a traffic light sequence. However, when I run the code, all the pictures appear at once without any effect from the button. Any help in ac ...
I am working with a list of ul li in a div where I need to dynamically add CSS classes based on the click event of an anchor tag. Below is the HTML structure of the ul li elements: <div class="tabs1"> <ul> <li class="active"> ...
I've created a script for generating random moving lines as a background element for my portfolio. While it runs smoothly on its own, I encounter frame drops when combining it with other CSS animations and effects, especially at the beginning (althoug ...
Have you visited this website? ---SPANISH LANGUAGE Here is another site to check out: ENGLISH LANGUAGE I'm having trouble with the image on the Spanish site showing up correctly. I want it to look like the image on the English site's front ...
I have been puzzled by the fact that I am unable to adjust the width of the table th in Firefox browser to the smallest value. However, in Chrome browser, this functionality works perfectly. I simply want to divide the values of my td into three rows as sh ...
$a = "ABCD"; ?> <link rel='stylesheet' type='text/css' href='others.php' /> <style> .page-title { text-indent: -9999px; line-height: 0; } .page-title:afte ...
I've been struggling all morning to find a solution. I've gone through several tutorials, but I still can't wrap my head around how this should work. In my Electron app, there is a button that, when clicked, should execute a batch file (hpm ...
Trying to solve the challenge of creating a fullscreen slider similar to the one described in this question, I created a jsfiddle (currently on hold) Despite knowing that scrolling too fast causes bugs and that scrolling both ways has the same effect, m ...
I need to make a table more visually attractive by removing specific borders without affecting the overall design. After applying the border-collapse property, I attempted to remove the right border from certain cells using CSS. However, this unintentional ...
Within the view page, there is jQuery code that sets a margin on a div. Below is the code: <script type='text/javascript'> $('#someID').css('margin-left', '10px'); </script> This code functions proper ...
When using the iconify library for VueJS, the icons' paths automatically have "currentColor" as their fill color. The issue arises when trying to set a path's color via CSS, as it seems to be ineffective. Even with "!important", the color won&apo ...