Q&A

I am trying to put together a diagram in CSS of a flow chart. I have attached below a picture. Is there a simple way to do this? I've been Googling around quite a bit looking for examples, but I don't know what to call this. Can you please let me know how to do this? Or if this is something common, what I can Google to find more information. by Collin Cunningham in StackOverflow on July 04, 2022 . Answer By using CSS Flex you could achieve something like: body {font: 16px/1.4 sans-serif;} .chart-row, .chart-col { display: flex; gap: 1em; } .chart-row { flex-direction: row; } .chart-col { flex-direction: column; } .chart-pill, .chart-rect{ padding: 1em; text-align: center; border: 2px solid #999; } .chart-pill { flex: 1; border-radius: 1em; border-style: dashed; } .chart-rect{ flex: 0; margin: auto 0; background: #eee; } .chart-line-h { height: 2px; min-width: 3em; background: #99...

I want to use clipPath for an image I'm trying to display on my webpage, and I want to be able to use percentages instead of absolute points with polygon . I've tried adding the viewBox attribute to my svg element to do so (suggested here SVG polygon points with percentage units support ), but when the image renders, it looks like absolute points are still being used. I have my html setup like this: <img class="clip-svg" src="{% static 'myApp/images/random.png' %}"> <div id="svg-container" style="width:100%; height:100%;"> <svg width='100%' height='100%' viewBox="0 0 100 100"> <defs> <clipPath id="myClip"> <polygon points="89,0 100,50 89,100 71,100 83,50 69,0"/> <polygon points="53,0 75,50 59,100 48,100 64,50 41,0" /> </clipPath> </defs> </svg> </div> With the CSS being: ...

just need a little help with this html/css code, i'm working on this little project, how can i move this green box from left to the right as it is on the images. How it is : How should it be : .container { display: flex; align-items: center; justify-content: center; margin-top: 20px; margin-bottom: 50px; } .container2 { border: 3px solid gray; width: 600px; height: 600px; text-align: center; display: flex; flex-direction: column; } .purple { background-color: rgb(202, 117, 202); width: 200px; height: 200px; } .green { background-color: rgb(99, 151, 99); width: 200px; height: 200px; } .spacing { height: 200px; } <div class="container"> <div class="container2"> <div class="purple"> </div> <div class="spacing"> </div> <div class="green"> </div> </div> </div> by Stuywesant ...

Does someone know how to remove this white space? This only occurs when I'm in mobile view. Image of the problem. Untitled: I tried using responsive instead of fluid but that doesn't solve the problem completely, the image is just scaled up. HTML code of these boxes <div class="row no-gutters"> <div class="col-6 d-flex align-items-center flex-column justify-content-center bg-dark"> <h2 class="mb-0 text-white">Za miran život bez stresa!</h2> <br> <p class="mb-0 text-white-50">321 GARAŽNO MESTO</p> <p class="mb-0 text-white-50">+ priključci za električni automobil, auto-perionica u garaži.</p> </div> <div class="col-6"> <img src="assets/img/slikablok2.jpg" class="img-fluid"> </div> </div> <div class="row no-gutters"> <div class="col-6"> <img ...

How can I change the fill color dynamically for the background-image inside of section::after . I tried with class name but that does not work. body { position: relative; width: 100%; margin: 0; padding: 0; color: #fff; } section { position: relative; display: flex; justify-content: center; align-items: center; flex-direction: column; min-height: 60vh; margin-bottom: 20vw; background-color: #222; padding: 1rem 0; } section::after { content: ""; position: absolute; bottom: 0; width: 100vw; height: 20vw; background-size: 100%; transform: translate(0, 100%); background-color: #fff; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' fill='%23222222' viewBox='0 0 1185 248'><circle cx='76' cy='120' r='20'/><circle cx='870' cy='201.1' r='10'/><circl...

Given a circle that is centered on the bottom-left corner of any rectangle (square, horizontal, vertical), calculate the width of the circle's bounding rectangle so its radius touches the top-right corner of the sizing rectangle in JavaScript. Considering the image below, I am looking for 1 JS function that can handle all 3 scenarios, given the known width and height of the rectangle. function getCircleWidth(width: number, height: number): number { // return width of circle's bounding rectangle } UPDATE: See the accepted answer below for the bullet proof logic for this problem, Ended up with the following with help from here https://www.omnicalculator.com/math/diagonal-of-rectangle : function getCircleWidth(width: number, height: number): number { return (Math.sqrt(Math.pow(width, 2) + Math.pow(height, 2)) * 2); } by noahmason in StackOverflow on June 05, 2022 . Answer The width of a circle's bounding rectan...

.container { height: 200px; width: 200px; border: 5px solid black; padding: 5px; } .button-group { display: inline-flex; flex-wrap: wrap; } .box { height: 45px; width: 45px; border-width: 5px; border-style: solid; } .red { border-color: red; } .green { border-color: green; } .blue { border-color: blue; } .yellow { border-color: yellow; } .pink { border-color: pink; } .brown { border-color: brown; } <div class="container"> <div class="button-group"> <div class="box red">R</div> <div class="box green">G</div> </div> <div class="button-group"> <div class="box blue">Bl</div> <div class="box yellow">Y</div> </div> <div class="button-group"> <div class="box pink">P</div> <div class="box brown...

im new i and i have no idea what exacly i am doing, but i need help with inserting a css in an html file. and honestly i have no idea what css is this is what im trying to get on w3shcool the tutorial is explaing the way to do it only using html, but what i am trying to do is having the css linked with the hmtl, so the grid code is in css this is the css code i use, body {display:grid; grid-template-rows: 900px 1000px auto 42px; grid-template-columns: 150px auto; grid-template-areas: 'header header' 'menu menu' 'sidebar content' 'footer footer'; gap: 10px; background-color: #FF69B4; padding: 10px; } header { grid-area: header; } nav { grid-area: menu; } article { grid-area: content; } aside { grid-area: sidebar; } footer { grid-area: footer; } and here is the html: <!DOCTYPE html> <html lang="bg=BG"> ...