{"id":29470,"date":"2023-01-08T02:13:59","date_gmt":"2023-01-07T20:43:59","guid":{"rendered":"https:\/\/jassweb.com\/solved\/solved-how-to-create-geometric-shapes-in-html\/"},"modified":"2023-01-08T02:13:59","modified_gmt":"2023-01-07T20:43:59","slug":"solved-how-to-create-geometric-shapes-in-html","status":"publish","type":"post","link":"https:\/\/jassweb.com\/solved\/solved-how-to-create-geometric-shapes-in-html\/","title":{"rendered":"[Solved] How to create geometric shapes in html"},"content":{"rendered":"

[ad_1]
\n<\/p>\n

\n
\n
<\/div>\n
\n
\n

I’m sure there are more elegant ways to accomplish what you’re looking for, but it can be accomplished using SVG, z-Index, Opacity and Clipping.<\/p>\n

Run the code and I think you’ll see it matches. The colors might not be exact but they’re close enough to show you what goes where. You can also separate the Styles from the HTML and put in a CSS file, but it was just faster for me to build it this way. <\/p>\n

I hope this helps.<\/p>\n<\/p>\n

\n
\n
<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\r\n<style>\r\n#col1 {\r\n    width: 100%;\r\n    height: 100%;\r\n    top: 0; \r\n    left: 0;\r\n    right: 0;\r\n    bottom: 0;\r\n    position: fixed;\r\n    display: block;\r\n    z-index: 3;\r\n}\r\n#col2 {\r\n    width: 100%;\r\n    height: 100%;\r\n    top: 0; \r\n    left: 0;\r\n    right: 0;\r\n    bottom: 0;\r\n    position: fixed;\r\n    display: block;\r\n    z-index: 1;\r\n}\r\n#col3 {\r\n    width: 100%;\r\n    height: 100%;\r\n    top: 0; \r\n    left: 0;\r\n    right: 0;\r\n    bottom: 0;\r\n    position: fixed;\r\n    display: block;\r\n    z-index: -2;\r\n}\r\n#col3a {\r\n    opacity: 0.90;\r\n    width: 100%;\r\n    height: 100%;\r\n    top: 0; \r\n    left: 0;\r\n    right: 0;\r\n    bottom: 0;\r\n    position: fixed;\r\n    display: block;\r\n    z-index: 1;\r\n}\r\n#col4 {\r\n    width: 100%;\r\n    height: 100%;\r\n    top: 0; \r\n    left: 0;\r\n    right: 0;\r\n    bottom: 0;\r\n    position: fixed;\r\n    display: block;\r\n    z-index: -3;\r\n}\r\n#col4a {\r\n    width: 100%;\r\n    height: 100%;\r\n    top: 0; \r\n    left: 0;\r\n    right: 0;\r\n    bottom: 0;\r\n    position: fixed;\r\n    display: block;\r\n    z-index: 4;\r\n}\r\n#col5 {\r\n    width: 100%;\r\n    height: 100%;\r\n    top: 0; \r\n    left: 0;\r\n    right: 0;\r\n    bottom: 0;\r\n    position: fixed;\r\n    display: block;\r\n    z-index: -4;\r\n}\r\n#col6 {\r\n    width: 100%;\r\n    height: 100%;\r\n    top: 0; \r\n    left: 0;\r\n    right: 0;\r\n    bottom: 0;\r\n    position: fixed;\r\n    display: block;\r\n    z-index: -5;\r\n}\r\n#col7 {\r\n    width: 100%;\r\n    height: 100%;\r\n    top: 0; \r\n    left: 0;\r\n    right: 0;\r\n    bottom: 0;\r\n    position: fixed; \r\n    display: block;\r\n    z-index: -6;\r\n}\r\n#col8 {\r\n    width: 100%;\r\n    height: 100%;\r\n    top: 0; \r\n    left: 0;\r\n    right: 0;\r\n    bottom: 0;\r\n    position: fixed;\r\n    display: block;\r\n    z-index: -7;\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n<div id=\"col1\">\r\n<svg height=\"1000\" width=\"1000\">\r\n  <circle cx=\"0\" cy=\"0\" r=\"100\" fill=\"#ffffff\" \/>\r\n  <circle cx=\"0\" cy=\"200\" r=\"100\" fill=\"#ffffff\" \/>\r\n  <circle cx=\"0\" cy=\"400\" r=\"100\" fill=\"#ffffff\" \/>\r\n  <circle cx=\"0\" cy=\"600\" r=\"100\" fill=\"#ffffff\" \/>\r\n  <circle cx=\"0\" cy=\"800\" r=\"100\" fill=\"#ffffff\" \/>\r\n<\/svg>\r\n<\/div>\r\n<div id=\"col2\">\r\n<svg height=\"1000\" width=\"1000\">\r\n  <circle cx=\"100\" cy=\"100\" r=\"100\" fill=\"#aba31a\" \/>\r\n  <circle cx=\"100\" cy=\"300\" r=\"100\" fill=\"#aba31a\" \/>\r\n  <circle cx=\"100\" cy=\"500\" r=\"100\" fill=\"#aba31a\" \/>\r\n  <circle cx=\"100\" cy=\"700\" r=\"100\" fill=\"#aba31a\" \/>\r\n<\/svg>\r\n<\/div>\r\n<div id=\"col3\">\r\n<svg height=\"1000\" width=\"1000\">\r\n  <circle cx=\"200\" cy=\"0\" r=\"100\" fill=\"#ffffff\" \/>\r\n  <circle cx=\"200\" cy=\"200\" r=\"100\" fill=\"#ffffff\" \/>\r\n  <circle cx=\"200\" cy=\"400\" r=\"100\" fill=\"#ffffff\" \/>\r\n  <circle cx=\"200\" cy=\"600\" r=\"100\" fill=\"#ffffff\" \/>\r\n  <circle cx=\"200\" cy=\"800\" r=\"100\" fill=\"#ffffff\" \/>\r\n<\/svg>\r\n<\/div>\r\n<div id=\"col3a\">\r\n<svg height=\"1000\" width=\"1000\">\r\n  <circle cx=\"200\" cy=\"200\" r=\"100\" fill=\"#326e78\" \/>\r\n  <circle cx=\"200\" cy=\"400\" r=\"100\" fill=\"#326e78\" \/>\r\n  <circle cx=\"200\" cy=\"600\" r=\"100\" fill=\"#326e78\" \/>\r\n  <circle cx=\"200\" cy=\"800\" r=\"100\" fill=\"#326e78\" \/>\r\n<\/svg>\r\n<\/div>\r\n<div id=\"col4\">\r\n<svg height=\"1000\" width=\"1000\">\r\n  <circle cx=\"300\" cy=\"100\" r=\"100\" fill=\"#aba31a\" \/>\r\n  <circle cx=\"300\" cy=\"300\" r=\"100\" fill=\"#aba31a\" \/>\r\n  <circle cx=\"300\" cy=\"500\" r=\"100\" fill=\"#aba31a\" \/>\r\n  <circle cx=\"300\" cy=\"700\" r=\"100\" fill=\"#aba31a\" \/>\r\n<\/svg>\r\n<\/div>\r\n<div id=\"col4a\">\r\n<svg width=\"1000\" height=\"1000\" >\r\n  <defs>\r\n    <clipPath id=\"clip1\">\r\n      <circle cx=\"200\" cy=\"0\" r=\"100\" \/>\r\n      <circle cx=\"200\" cy=\"200\" r=\"100\" \/>\r\n    <\/clipPath>\r\n  <\/defs>\r\n  <circle cx=\"300\" cy=\"100\" r=\"100\" fill=\"#ffffff\" clip-path=\"url(#clip1)\" \/>\r\n  <defs>\r\n    <clipPath id=\"clip2\">\r\n      <circle cx=\"200\" cy=\"200\" r=\"100\" \/>\r\n      <circle cx=\"200\" cy=\"400\" r=\"100\" \/>\r\n    <\/clipPath>\r\n  <\/defs>\r\n  <circle cx=\"300\" cy=\"300\" r=\"100\" fill=\"#ffffff\" clip-path=\"url(#clip2)\" \/>\r\n  <defs>\r\n    <clipPath id=\"clip3\">\r\n      <circle cx=\"200\" cy=\"400\" r=\"100\" \/>\r\n      <circle cx=\"200\" cy=\"600\" r=\"100\" \/>\r\n    <\/clipPath>\r\n  <\/defs>\r\n  <circle cx=\"300\" cy=\"500\" r=\"100\" fill=\"#ffffff\" clip-path=\"url(#clip3)\" \/>\r\n  <defs>\r\n    <clipPath id=\"clip4\">\r\n      <circle cx=\"200\" cy=\"600\" r=\"100\" \/>\r\n      <circle cx=\"200\" cy=\"800\" r=\"100\" \/>\r\n    <\/clipPath>\r\n  <\/defs>\r\n  <circle cx=\"300\" cy=\"700\" r=\"100\" fill=\"#ffffff\" clip-path=\"url(#clip4)\" \/>\r\n  <defs>\r\n    <clipPath id=\"clip5\">\r\n      <circle cx=\"200\" cy=\"800\" r=\"100\" \/>\r\n    <\/clipPath>\r\n  <\/defs>\r\n  <circle cx=\"300\" cy=\"900\" r=\"100\" fill=\"#ffffff\" clip-path=\"url(#clip5)\" \/>\r\n<\/svg>\r\n<\/div>\r\n<div id=\"col5\">\r\n<svg height=\"1000\" width=\"1000\">\r\n  <circle cx=\"400\" cy=\"0\" r=\"100\" fill=\"#ffffff\" \/>\r\n  <circle cx=\"400\" cy=\"200\" r=\"100\" fill=\"#ffffff\" \/>\r\n  <circle cx=\"400\" cy=\"400\" r=\"100\" fill=\"#ffffff\" \/>\r\n  <circle cx=\"400\" cy=\"600\" r=\"100\" fill=\"#ffffff\" \/>\r\n  <circle cx=\"400\" cy=\"800\" r=\"100\" fill=\"#ffffff\" \/>\r\n<\/svg>\r\n<\/div>\r\n<div id=\"col3a\">\r\n<svg height=\"1000\" width=\"1000\">\r\n  <circle cx=\"400\" cy=\"200\" r=\"100\" fill=\"#326e78\" \/>\r\n  <circle cx=\"400\" cy=\"400\" r=\"100\" fill=\"#326e78\" \/>\r\n  <circle cx=\"400\" cy=\"600\" r=\"100\" fill=\"#326e78\" \/>\r\n  <circle cx=\"400\" cy=\"800\" r=\"100\" fill=\"#326e78\" \/>\r\n<\/svg>\r\n<\/div>\r\n<div id=\"col6\">\r\n<svg height=\"1000\" width=\"1000\">\r\n  <circle cx=\"500\" cy=\"100\" r=\"100\" fill=\"#aba31a\" \/>\r\n  <circle cx=\"500\" cy=\"300\" r=\"100\" fill=\"#aba31a\" \/>\r\n  <circle cx=\"500\" cy=\"500\" r=\"100\" fill=\"#aba31a\" \/>\r\n  <circle cx=\"500\" cy=\"700\" r=\"100\" fill=\"#aba31a\" \/>\r\n<\/svg>\r\n<\/div>\r\n<div id=\"col4a\">\r\n<svg width=\"1000\" height=\"1000\" >\r\n  <defs>\r\n    <clipPath id=\"clip6\">\r\n      <circle cx=\"400\" cy=\"0\" r=\"100\" \/>\r\n      <circle cx=\"400\" cy=\"200\" r=\"100\" \/>\r\n    <\/clipPath>\r\n  <\/defs>\r\n  <circle cx=\"500\" cy=\"100\" r=\"100\" fill=\"#ffffff\" clip-path=\"url(#clip6)\" \/>\r\n  <defs>\r\n    <clipPath id=\"clip7\">\r\n      <circle cx=\"400\" cy=\"200\" r=\"100\" \/>\r\n      <circle cx=\"400\" cy=\"400\" r=\"100\" \/>\r\n    <\/clipPath>\r\n  <\/defs>\r\n  <circle cx=\"500\" cy=\"300\" r=\"100\" fill=\"#ffffff\" clip-path=\"url(#clip7)\" \/>\r\n  <defs>\r\n    <clipPath id=\"clip8\">\r\n      <circle cx=\"400\" cy=\"400\" r=\"100\" \/>\r\n      <circle cx=\"400\" cy=\"600\" r=\"100\" \/>\r\n    <\/clipPath>\r\n  <\/defs>\r\n  <circle cx=\"500\" cy=\"500\" r=\"100\" fill=\"#ffffff\" clip-path=\"url(#clip8)\" \/>\r\n  <defs>\r\n    <clipPath id=\"clip9\">\r\n      <circle cx=\"400\" cy=\"600\" r=\"100\" \/>\r\n      <circle cx=\"400\" cy=\"800\" r=\"100\" \/>\r\n    <\/clipPath>\r\n  <\/defs>\r\n  <circle cx=\"500\" cy=\"700\" r=\"100\" fill=\"#ffffff\" clip-path=\"url(#clip9)\" \/>\r\n  <defs>\r\n    <clipPath id=\"clip10\">\r\n      <circle cx=\"400\" cy=\"800\" r=\"100\" \/>\r\n    <\/clipPath>\r\n  <\/defs>\r\n  <circle cx=\"500\" cy=\"900\" r=\"100\" fill=\"#ffffff\" clip-path=\"url(#clip10)\" \/>\r\n<\/svg>\r\n<\/div>\r\n<div id=\"col7\">\r\n<svg height=\"1000\" width=\"1000\">\r\n  <circle cx=\"600\" cy=\"0\" r=\"100\" fill=\"#ffffff\" \/>\r\n  <circle cx=\"600\" cy=\"200\" r=\"100\" fill=\"#ffffff\" \/>\r\n  <circle cx=\"600\" cy=\"400\" r=\"100\" fill=\"#ffffff\" \/>\r\n  <circle cx=\"600\" cy=\"600\" r=\"100\" fill=\"#ffffff\" \/>\r\n  <circle cx=\"600\" cy=\"800\" r=\"100\" fill=\"#ffffff\" \/>\r\n<\/svg>\r\n<\/div>\r\n<div id=\"col3a\">\r\n<svg height=\"1000\" width=\"1000\">\r\n  <circle cx=\"600\" cy=\"200\" r=\"100\" fill=\"#326e78\" \/>\r\n  <circle cx=\"600\" cy=\"400\" r=\"100\" fill=\"#326e78\" \/>\r\n  <circle cx=\"600\" cy=\"600\" r=\"100\" fill=\"#326e78\" \/>\r\n  <circle cx=\"600\" cy=\"800\" r=\"100\" fill=\"#326e78\" \/>\r\n<\/svg>\r\n<\/div>\r\n<div id=\"col8\">\r\n<svg height=\"1000\" width=\"1000\">\r\n  <circle cx=\"700\" cy=\"100\" r=\"100\" fill=\"#aba31a\" \/>\r\n  <circle cx=\"700\" cy=\"300\" r=\"100\" fill=\"#aba31a\" \/>\r\n  <circle cx=\"700\" cy=\"500\" r=\"100\" fill=\"#aba31a\" \/>\r\n  <circle cx=\"700\" cy=\"700\" r=\"100\" fill=\"#aba31a\" \/>\r\n<\/svg>\r\n<\/div>\r\n<div id=\"col4a\">\r\n<svg width=\"1000\" height=\"1000\" >\r\n  <defs>\r\n    <clipPath id=\"clip11\">\r\n      <circle cx=\"600\" cy=\"0\" r=\"100\" \/>\r\n      <circle cx=\"600\" cy=\"200\" r=\"100\" \/>\r\n    <\/clipPath>\r\n  <\/defs>\r\n  <circle cx=\"700\" cy=\"100\" r=\"100\" fill=\"#ffffff\" clip-path=\"url(#clip11)\" \/>\r\n  <defs>\r\n    <clipPath id=\"clip12\">\r\n      <circle cx=\"600\" cy=\"200\" r=\"100\" \/>\r\n      <circle cx=\"600\" cy=\"400\" r=\"100\" \/>\r\n    <\/clipPath>\r\n  <\/defs>\r\n  <circle cx=\"700\" cy=\"300\" r=\"100\" fill=\"#ffffff\" clip-path=\"url(#clip12)\" \/>\r\n  <defs>\r\n    <clipPath id=\"clip13\">\r\n      <circle cx=\"600\" cy=\"400\" r=\"100\" \/>\r\n      <circle cx=\"600\" cy=\"600\" r=\"100\" \/>\r\n    <\/clipPath>\r\n  <\/defs>\r\n  <circle cx=\"700\" cy=\"500\" r=\"100\" fill=\"#ffffff\" clip-path=\"url(#clip13)\" \/>\r\n  <defs>\r\n    <clipPath id=\"clip14\">\r\n      <circle cx=\"600\" cy=\"600\" r=\"100\" \/>\r\n      <circle cx=\"600\" cy=\"800\" r=\"100\" \/>\r\n    <\/clipPath>\r\n  <\/defs>\r\n  <circle cx=\"700\" cy=\"700\" r=\"100\" fill=\"#ffffff\" clip-path=\"url(#clip14)\" \/>\r\n  <defs>\r\n    <clipPath id=\"clip15\">\r\n      <circle cx=\"600\" cy=\"800\" r=\"100\" \/>\r\n    <\/clipPath>\r\n  <\/defs>\r\n  <circle cx=\"700\" cy=\"900\" r=\"100\" fill=\"#ffffff\" clip-path=\"url(#clip15)\" \/>\r\n<\/svg>\r\n<\/div>  \r\n<div id=\"col3a\">\r\n<svg height=\"1000\" width=\"1000\">\r\n  <circle cx=\"800\" cy=\"200\" r=\"100\" fill=\"#326e78\" \/>\r\n  <circle cx=\"800\" cy=\"400\" r=\"100\" fill=\"#326e78\" \/>\r\n  <circle cx=\"800\" cy=\"600\" r=\"100\" fill=\"#326e78\" \/>\r\n  <circle cx=\"800\" cy=\"800\" r=\"100\" fill=\"#326e78\" \/>\r\n<\/svg>\r\n<\/div>\r\n<div id=\"col1\">\r\n<svg height=\"1000\" width=\"1000\">\r\n  <circle cx=\"900\" cy=\"100\" r=\"100\" fill=\"#ffffff\" \/>\r\n  <circle cx=\"900\" cy=\"300\" r=\"100\" fill=\"#ffffff\" \/>\r\n  <circle cx=\"900\" cy=\"500\" r=\"100\" fill=\"#ffffff\" \/>\r\n  <circle cx=\"900\" cy=\"700\" r=\"100\" fill=\"#ffffff\" \/>\r\n  <circle cx=\"900\" cy=\"900\" r=\"100\" fill=\"#ffffff\" \/>\r\n<\/svg>\r\n<\/div>\r\n<\/body>\r\n<\/html> <\/code><\/pre>\n<\/div>\n<\/div><\/div>\n
<\/div>\n<\/div>\n
            2<\/span> <\/p><\/div>\n<\/div>\n
[ad_2]<\/p>\n
solved How to create geometric shapes in html <\/p>\n","protected":false},"excerpt":{"rendered":"
[ad_1] I’m sure there are more elegant ways to accomplish what you’re looking for, but it can be accomplished using SVG, z-Index, Opacity and Clipping. Run the code and I think you’ll see it matches. The colors might not be exact but they’re close enough to show you what goes where. You can also separate … Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[320],"tags":[464,346,728],"class_list":["post-29470","post","type-post","status-publish","format-standard","hentry","category-solved","tag-css","tag-html","tag-user-interface"],"yoast_head":"\n[Solved] How to create geometric shapes in html - JassWeb<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/jassweb.com\/solved\/solved-how-to-create-geometric-shapes-in-html\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"[Solved] How to create geometric shapes in html - JassWeb\" \/>\n<meta property=\"og:description\" content=\"[ad_1] I’m sure there are more elegant ways to accomplish what you’re looking for, but it can be accomplished using SVG, z-Index, Opacity and Clipping. Run the code and I think you’ll see it matches. The colors might not be exact but they’re close enough to show you what goes where. You can also separate ... Read more\" \/>\n<meta property=\"og:url\" content=\"https:\/\/jassweb.com\/solved\/solved-how-to-create-geometric-shapes-in-html\/\" \/>\n<meta property=\"og:site_name\" content=\"JassWeb\" \/>\n<meta property=\"article:published_time\" content=\"2023-01-07T20:43:59+00:00\" \/>\n<meta name=\"author\" content=\"Kirat\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Kirat\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/jassweb.com\/solved\/solved-how-to-create-geometric-shapes-in-html\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/jassweb.com\/solved\/solved-how-to-create-geometric-shapes-in-html\/\"},\"author\":{\"name\":\"Kirat\",\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31\"},\"headline\":\"[Solved] How to create geometric shapes in html\",\"datePublished\":\"2023-01-07T20:43:59+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/jassweb.com\/solved\/solved-how-to-create-geometric-shapes-in-html\/\"},\"wordCount\":103,\"publisher\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#organization\"},\"keywords\":[\"css\",\"html\",\"user-interface\"],\"articleSection\":[\"Solved\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/jassweb.com\/solved\/solved-how-to-create-geometric-shapes-in-html\/\",\"url\":\"https:\/\/jassweb.com\/solved\/solved-how-to-create-geometric-shapes-in-html\/\",\"name\":\"[Solved] How to create geometric shapes in html - JassWeb\",\"isPartOf\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#website\"},\"datePublished\":\"2023-01-07T20:43:59+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/jassweb.com\/solved\/solved-how-to-create-geometric-shapes-in-html\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/jassweb.com\/solved\/solved-how-to-create-geometric-shapes-in-html\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/jassweb.com\/solved\/solved-how-to-create-geometric-shapes-in-html\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/jassweb.com\/solved\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"[Solved] How to create geometric shapes in html\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/jassweb.com\/solved\/#website\",\"url\":\"https:\/\/jassweb.com\/solved\/\",\"name\":\"JassWeb\",\"description\":\"Build High-quality Websites\",\"publisher\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/jassweb.com\/solved\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/jassweb.com\/solved\/#organization\",\"name\":\"Jass Web\",\"url\":\"https:\/\/jassweb.com\/solved\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png\",\"contentUrl\":\"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png\",\"width\":693,\"height\":132,\"caption\":\"Jass Web\"},\"image\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31\",\"name\":\"Kirat\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1775798750\",\"contentUrl\":\"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1775798750\",\"caption\":\"Kirat\"},\"sameAs\":[\"http:\/\/jassweb.com\"],\"url\":\"https:\/\/jassweb.com\/solved\/author\/jaspritsinghghumangmail-com\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"[Solved] How to create geometric shapes in html - JassWeb","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/jassweb.com\/solved\/solved-how-to-create-geometric-shapes-in-html\/","og_locale":"en_US","og_type":"article","og_title":"[Solved] How to create geometric shapes in html - JassWeb","og_description":"[ad_1] I’m sure there are more elegant ways to accomplish what you’re looking for, but it can be accomplished using SVG, z-Index, Opacity and Clipping. Run the code and I think you’ll see it matches. The colors might not be exact but they’re close enough to show you what goes where. You can also separate ... Read more","og_url":"https:\/\/jassweb.com\/solved\/solved-how-to-create-geometric-shapes-in-html\/","og_site_name":"JassWeb","article_published_time":"2023-01-07T20:43:59+00:00","author":"Kirat","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Kirat","Est. reading time":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/jassweb.com\/solved\/solved-how-to-create-geometric-shapes-in-html\/#article","isPartOf":{"@id":"https:\/\/jassweb.com\/solved\/solved-how-to-create-geometric-shapes-in-html\/"},"author":{"name":"Kirat","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31"},"headline":"[Solved] How to create geometric shapes in html","datePublished":"2023-01-07T20:43:59+00:00","mainEntityOfPage":{"@id":"https:\/\/jassweb.com\/solved\/solved-how-to-create-geometric-shapes-in-html\/"},"wordCount":103,"publisher":{"@id":"https:\/\/jassweb.com\/solved\/#organization"},"keywords":["css","html","user-interface"],"articleSection":["Solved"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/jassweb.com\/solved\/solved-how-to-create-geometric-shapes-in-html\/","url":"https:\/\/jassweb.com\/solved\/solved-how-to-create-geometric-shapes-in-html\/","name":"[Solved] How to create geometric shapes in html - JassWeb","isPartOf":{"@id":"https:\/\/jassweb.com\/solved\/#website"},"datePublished":"2023-01-07T20:43:59+00:00","breadcrumb":{"@id":"https:\/\/jassweb.com\/solved\/solved-how-to-create-geometric-shapes-in-html\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/jassweb.com\/solved\/solved-how-to-create-geometric-shapes-in-html\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/jassweb.com\/solved\/solved-how-to-create-geometric-shapes-in-html\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/jassweb.com\/solved\/"},{"@type":"ListItem","position":2,"name":"[Solved] How to create geometric shapes in html"}]},{"@type":"WebSite","@id":"https:\/\/jassweb.com\/solved\/#website","url":"https:\/\/jassweb.com\/solved\/","name":"JassWeb","description":"Build High-quality Websites","publisher":{"@id":"https:\/\/jassweb.com\/solved\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/jassweb.com\/solved\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/jassweb.com\/solved\/#organization","name":"Jass Web","url":"https:\/\/jassweb.com\/solved\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/","url":"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png","contentUrl":"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png","width":693,"height":132,"caption":"Jass Web"},"image":{"@id":"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31","name":"Kirat","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/person\/image\/","url":"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1775798750","contentUrl":"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1775798750","caption":"Kirat"},"sameAs":["http:\/\/jassweb.com"],"url":"https:\/\/jassweb.com\/solved\/author\/jaspritsinghghumangmail-com\/"}]}},"_links":{"self":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/posts\/29470","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/comments?post=29470"}],"version-history":[{"count":0,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/posts\/29470\/revisions"}],"wp:attachment":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/media?parent=29470"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/categories?post=29470"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/tags?post=29470"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}