Генератор геометрических фигур css

CSS Clip Path Generator

This tool will help you generate a CSS clip-path. It automatically generates a grid with useful snapping points so you can create interesting shapes. Drag from the middle of a line to add a new point.

Triangle Square Pentagon Hexagon Heptagon Octagon Diamond Border-Only Star Camera Checkerboard Small Checkerboard Batman Left Arrow Right Arrow Speech Bubble Concentric Squares

FAQ

What is the browser compatibility like?

With the exception of a handful of older browsers, support is pretty good when using the polygon() function.

How does the grid work?

When you have Snap To Grid enabled, it will automatically generate some useful lines, circles and points for creating right angles, equal lengths, triangles and align the points into lots of different useful places.

Can I edit an existing clip-path ?

Sure! Just paste your clip-path code into the output box and we’ll do our best to parse it. You can also edit a generated clip-path to see how some tweaks would look.

What controls are there?

• Drag from the middle of a line to add a new point
• Hold shift while dragging to temporarily disable the grid
• Hold shift while clicking to select two corners
• Drag a box around multiple corners to select lots
• Click on an edge to select two corners
• Drag the whole shape
• Undo (Ctrl+Z or ⌘+Z)
• Redo (Ctrl+Y or ⌘+⇧+Z)
• New (Ctrl+N or ⌘+N)
• Save (Ctrl+S or ⌘+S)
• Copy The Snippet (Ctrl+C or ⌘+C)
• Share your creation using a permanent link

Источник

Create dashboards for your development needs

Frontend Toolkit helps you organize everything you need in your daily work in one place. Without annoying ads and fully customizable. Say goodbye to cluttered websites and hello to a streamlined experience.

A set of built-in widgets allows you to do the tedious parts of your work quickly.

Color Converter

Convert your colors to different CSS units by simply pasting your color anywhere on the site. RGB to HEX, HEX to RGB, HEX to HSL and many more!

SVG Converter

Optimize your SVG based on many different options and (optionally) transform the SVG to JSX, TSX, React Native, CSS or Base64.

Base64 Converter

Decode Base64 or encode Base64 strings and easily copy the transformed output.

CSS Converter

Minify CSS or beautify/format CSS and easily copy the transformed output.

URL Converter

Encode and decode your url and easily copy the transformed output.

Regex Tester

Regular Expression tester with syntax highlighting for Javascript.

Npm Package Size

Get size information about your npm dependencies. To determine the dependency size the awesome bundlephobia service is used.

JSON Converter

Use the JSON Converter to minify or beautify/format your JSON. It can also generate TypeScript interfaces based on the JSON input.

JS/TS Converter AI-enhanced

Automatically convert your JavaScript code to TypeScript. Minify, beautify or format your JavaScript and TypeScript code.

Image Converter

Compress your images (jpg, png, webp, gif) easily in the browser and compare the outcome with the original image.

CSS Triangle Generator

Generate CSS triangles in different directions, sizes and colors. Preview your selection and easily copy paste the CSS code.

CSS & SVG Symbols

Collection of SVG/CSS icons and symbols, easy to copy and paste as SVG or CSS.

Create your own widgets

Missing something that would be useful to have on your dashboard?

Embed websites

Easily access your favorite websites directly from your dashboard with our simple embed feature. No need to constantly switch back and forth between tabs, just embed your desired website for quick and convenient access.

Add markdown

Keep track of your todos, compile a list of essential tools for your next project, or store your frequently used code snippets in a user-friendly and easily readable format. Upgrade your productivity and streamline your workflow with markdown.

# Build image docker build -t . # Start new container with image docker run -dp 3000:3000 # Get container ids docker ps # Get logs from container docker logs -f # SH into running container: docker exec -it bash
 
Источник
 
CSS Triangle Generator
 
CSS Triangle Generator is a free online tool for generating CSS triangles. There is no simple and direct method for creating triangles in CSS. Therefore, it's a little tricky / complicated and using an online CSS triangle generator is a good practice for saving time.
 
You can generate different shapes in HTML with single line of code, but when it comes to creating a CSS triangle, it becomes a hassle for software developers even if triangle is one of the most basic shapes in geometry. Main reason for this is there isn't a shortcut method for creating triangle with CSS styles. It may be added to CSS standards in future if major browsers come to an agreement in future, but for now, best way is to use CSS triangle maker. Also, if you merge your triangle with a square or rectangle that have compatible size with triangle, you can obtain arrows with CSS that means you can use this tool as CSS arrow generator. You can set direction of the arrow by using triangles that have different directions. Left, right, top or bottom arrows can be created easily with a little CSS tuning.
 
Triangles are used for different purposes in HTML designs such as comment or chat boxes, dropdown menus, header menu indicators etc. Here is a basic example that shows how CSS triangles are used in designs.
 
 
Most generic way to produce CSS triangles is to manipulate border widths of a 0x0 HTML element. There are 4 width and 4 color for the border you can determine. By setting these parameters properly, you can obtain a CSS-only triangle easily.
 
There is a major issue with CSS triangles when you need to set box shadows on them. Since they are 0x0 size HTML elements with borders, it is impossible to give box shadow or elevation to them directly. If you have such necessity, you may use SVGs or images instead of HTML & CSS. But most of the time, triangles are so small, and it is almost impossible to distinguish if they have box shadows or not. So, you can also use them even they have shadows in UI designs by considering drawbacks and advantages.
 
How to use Online CSS Triangle Generator?
 
You can generate CSS triangles by following these steps.
 
 
First, chose the direction of the triangle. There are 8 options. 4 of them in the corners are 90° triangles, therefore you cannot customize their width or height.
 
Select the color of the triangle. It may be a solid or an opaque color according to your choice.
 
Set width and height of the triangle. You can customize width for triangles pointing up and down and customize height for triangles pointing left and right. 90° triangles cannot be customized.
 
You can check the triangle in the preview section.
 
If everything is ok, you can copy the CSS code for the created triangle by using the "Copy" button.
 
 
Источник
 
CSS Triangle Generator
 
This tool will help you generate a freeform triangle using only 1 HTML element and some simple CSS properties. You can move the 3 points wherever you want and it will fit the triangle to them. The points will snap to some useful lines to create right angle, isosceles or equilateral triangles.
 
FAQ
 
Why can I only use a solid color? I wanted a triangle with a gradient/image instead.
 
This tool generates CSS triangles by manipulating the border widths of a 0 by 0 rectangle, and only applying a color to one side. At the moment, the border-image property can only be applied to all borders and cannot be applied to just one. If you want a pure CSS triangle with an image or gradient background, you could have a go with our clip-path generator to use the clip-path property instead.
 
What is the Increased Precision option and the scale(0.1) for in the output code?
 
The border-width property only works with whole numbers. If you were to set the border-width to 4.387px then your border will only be 4px wide. This lack of precision can make some CSS triangles slightly misaligned. To compensate this, the increased precision makes the triangle 10 times bigger and scales it 10 times smaller. This effectively gives us 1 extra decimal point in the border widths, which is enough for the triangle to align correctly. If this isn't important to you, you can turn the increased precision option off and benefit from slightly smaller CSS code.
 
How does the grid work?
 
When you have Snap To Grid enabled, it will automatically generate some useful lines, circles and points for creating right angle triangles, isosceles triangles and equilateral triangle.
 
What other controls are there?
 
 
Hold shift while dragging to temporarily disable the grid
 
Hold shift while clicking to select two corners
 
Drag a box around two corners to select both
 
Click on an edge to select two corners
 
Drag the whole shape
 
Undo (Ctrl+Z or ⌘+Z)
 
Redo (Ctrl+Y or ⌘+⇧+Z)
 
New (Ctrl+N or ⌘+N)
 
Save (Ctrl+S or ⌘+S)
 
Copy The Snippet (Ctrl+C or ⌘+C)
 
Share your creation using a permanent link
 
 
Источник