Breaking News: Grepper is joining You.com. Read the official announcement!

css value semicircle gauge

Embarrassed Eagle answered on March 10, 2023 Popularity 3/10 Helpfulness 1/10

answer css value semicircle gauge

related css value semicircle gauge

css value semicircle gauge

Comment

<div class="gauge">
    <div class="arc"></div>
    <div class="pointer"></div>
    <div class="mask"></div>
    <div class="label">75% (135°)</div>
</div>
 Run code snippetHide results

Popularity 3/10 Helpfulness 1/10 Language css

Source: stackoverflow.com

Tags: css gauge

Link to this answer
Share Copy Link

Contributed on Mar 10 2023

Embarrassed Eagle

0 Answers Avg Quality 2/10

Closely Related Answers

css value semicircle gauge

Comment

.gauge{
    height: 85px;
    /*overflow: hidden;*/
    position: relative;
    width: 170px;
}
.gauge .arc{
    background-image:
        radial-gradient(#fff 0, #fff 60%, transparent 60%),
        conic-gradient(red 0, orange 135deg, #ccc 135deg, #ccc 180deg, #fff 180deg, #fff 360deg);
    background-position: center center, center center;
    background-repeat: no-repeat;
    background-size: 100% 100%, 100% 100%;
    border-radius: 50%;
    border-style: none;
    height: 170px;
    position: relative;
    transform: rotate(-90deg);
    width: 100%;
}
.gauge .pointer{
    background: #fff;
    border: 1px solid #000;
    border-radius: 5px;
    bottom: 0;
    content: '';
    height: 6px;
    left: 0;
    position: absolute;
    transform: rotate(135deg) translateX(2px) translateY(-6px);
    transform-origin: 85px 0;
    width: 20px;
    z-index: 5;
}
.gauge .mask::before,
.gauge .mask::after{
    background-image: radial-gradient(transparent 0, transparent 50%, #fff 50%, #fff 100%);
    clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0% 100%);
    content: '';
    height: 18px;
    position: absolute;
    width: 18px;
}
.gauge .mask::before{
    left: -2px;
    bottom: 0;
}
.gauge .mask::after{
    bottom: 0;
    right: -2px;
}
.gauge .label{
    bottom: 20px;
    font-size: 16px;
    font-weight: 700;
    left: 0;
    line-height: 26px;
    position: absolute;
    text-align: center;
    width: 100%;
}

Popularity 3/10 Helpfulness 1/10 Language css

Source: stackoverflow.com

Tags: css gauge

Link to this answer
Share Copy Link

Contributed on Mar 10 2023

Embarrassed Eagle

0 Answers Avg Quality 2/10

css value semicircle gauge

Contents

More Related Answers

css value semicircle gauge

Closely Related Answers

css value semicircle gauge

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.