文章/答案/技术大牛

发布

社区首页 >问答首页 >圆圈周围带有文本的线条

问圆圈周围带有文本的线条
EN

Stack Overflow用户

提问于 2020-07-30 20:01:11

回答 2查看 48关注 0票数 0

如何在包含每行文本的圆圈周围创建线条。我不希望文本出现在伪类中。以下是所需的输出图像

。

下面的代码是我在Paulie_D以前的解决方案中尝试过的

.outCircle {
  width: 20px;
  height: 20px;
  background-color: lightblue;
  position: relative;
  border-radius: 50%;
  margin: 100px auto;
}
.marker {
  width: 50px;
  height: 2px;
  position: absolute;
  top: 50%;
  left: 50%;
  background: linear-gradient(to right, black, black 25%, transparent 25%, transparent 75%, black 75%);
  transform: translate(-50%, -50%);
}
.vert {
  width: 2px;
  height: 50px;
  background: linear-gradient(to bottom, black, black 25%, transparent 25%, transparent 75%, red 75%);
  transform: translate(-50%, -50%);
}
.angle-1 {
  transform: translate(-50%, -50%) rotate(45deg);
}
.angle-2 {
  transform: translate(-50%, -50%) rotate(-45deg);
}
.inner {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
 
}

<div class="outCircle">
  <div class="inner">
    <div class="marker horiz"></div>
    <div class="marker vert"></div>
    <div class="marker angle-1"></div>
    <div class="marker angle-2"></div>
  </div>
</div>

css

sass

回答 2

Stack Overflow用户

发布于 2020-07-31 08:23:14

不幸的是，您的问题并不完全清楚，但我的猜测是，您希望创建一些关于种子的信息图形，并在漂亮的图形周围显示文本。

我没有重点向你展示如何用CSS创建有边框的圆圈并在它们周围放置文本，而是从你的原始图像中删除文本并将其裁剪。因为，正如我在我的评论中建议访问我在SO62815794上的答案，对我来说，更有意义的是将代码和裁剪后的图像展示给您如何创建一个具有Flexbox布局和媒体查询的响应式信息图形。

如果这不是你的意思，请修改你的答案，并更具体地说明你需要什么。然而，虽然用CSS创建图形很有趣，但在维护方面，你最好使用裁剪的图像或SVG文件(更多的图形元素用于创建自定义形状)。

代码片段

有两个演示，展示了如何使用弹性框布局与自定义属性相结合，以中心裁剪的图像创建相应大小的2D XxY网格。

与

demo演示1

相比，cells

demo 1是一个相当简单的3x3 flexbox网格，具有相同大小的flexbox 2更为复杂，具有嵌套1x2、1x3和1x2子网格的主3x1网格，给人一种更“圆形”的感觉

代码片段被大量注释，应该是自解释的，但另外：

我将您的原始.outCircle留在了HTML语言中，只是将其禁用。
裁剪后的图像是138x138px PNG文件(11.4Kb)，具有透明背景(alpha通道)，因此您可以使用info-graphic background-color (现在使用: White)
@media将任何小于720px (宽/高)的内容视为智能手机，并且既不显示图像(或D37)，也不显示E138任何网格布局。

你所需要做的就是对间距、颜色和字体大小进行一些微调。

确保在SO上转到“整页”，并调整浏览器窗口的大小。

/*************************************/
/* main page structure, MOBILE first */
/*************************************/
body { height: 100vh; background-color: White }

.main-structure {
    display: flex; flex-flow: column wrap;

    /* Center everything inside the element (vertical and horizontal) */
    justify-content: center; align-content: center; align-items: center

    /* add your specific mobile settings */
}
.main-structure .outCircle { display: none } /* don't show on mobile */
.main-structure img        { display: none } /* ditto */

.main-structure ul { padding-right: 40px } /* [OPTIONAL] to make L/R padding equal */


/*************/
/* EYE-CANDY */
/*************/
[band*="header"] {
    background-color: rgba(254,190,0,1); /* egg yolk-ish */
    text-align: center
}

.main-structure .headline {
    width: 100%; /* stretch to fill parent */
    padding: .25em 1em; /* some inner spacing */
    
    color: CornflowerBlue;
    font-size: 1.25em; font-weight: bold;
}

.outCircle {
    position: relative; /* creates a new 'stacking context' for child elements */

    /* Center everything inside the element (vertical and horizontal) */
    justify-content: center; align-content: center; align-items: center;
}
.inner {
    position: absolute;
    width : 1.25rem;
    height: 1.25rem;

    border-radius: 50%;
    background-color: lightblue;
}
.marker {
    position: absolute; /* direct positioning inside parent 'stacking context' */
    width: 3rem; height: 0.125rem;

    /* center element in parent */
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);

    background: linear-gradient(to right, black, black 25%, transparent 25%, transparent 75%, black 75%);
}
.vert {
  width: 0.125rem; height: 3rem;
  transform: translate(-50%, -50%);

  background: linear-gradient(to bottom, black, black 25%, transparent 25%, transparent 75%, red 75%);
}
.angle-1 { transform: translate(-50%, -50%) rotate(45deg)  }
.angle-2 { transform: translate(-50%, -50%) rotate(-45deg) }


/*****************************/
/* DESKTOP specific settings */
/*****************************/

@media (min-width: 720px) and (min-height: 720px) { /* anything larger than average mobile */

    /* base flexbox patch grid structure */
    [patch],[patch]>* { display: flex; flex-wrap: wrap } /* patch and cell containers */

    [patch]   { align-content: flex-start; position: relative }
    [patch]>* { flex-grow: 1;     /* [MANDATORY] */
                overflow: hidden; /* [OPTIONAL]  */
                /* Center everything inside the element (vertical and horizontal) */
                justify-content: center; align-content: center; align-items: center }

    /* the "nine-patch", inspired by Android 9-patch image; essentially a 3x3 matrix */
    [patch^= "3x"]>*  { height    : 33.33333%; max-height: 33.33333% } /* ^...starts with */
    [patch*= "x3"]>*  { flex-basis: 33.33333%; max-width : 33.33333% } /* *...contains    */

    [patch^= "1x"]>*  { height: 100%; max-height: 100% } [patch*= "x1"]>* { flex-basis: 100%; max-width: 100% }
    [patch^= "2x"]>*  { height:  50%; max-height:  50% } [patch*= "x2"]>* { flex-basis:  50%; max-width:  50% }
    /* add your own specific patch cell sizes like below */
    /* 
        7x1 days in a week, 18x8 Periodic Table, 24x1 hours in a day, 22x6 keyboard+numpad, etc.
        just divide 100% by the required XxY values

        Usage:

        <parent-tag patch="XxY">
            requires X * Y number of child-tags to work properly
            <child-tag 1>
                ....
            <child-tag N>
        </parent-tag>
    */

    body { background-color: rgba(0,0,0,.1) } /* light grey */

    .main-structure {
        flex-flow: row wrap; /* we have 3 rows of several columns */
        height: 75vmin; width: 75vmin; /* Modify to your needs */
        background-color: White;
    }

    [band*="info2"] .main-structure>[patch="1x2"] {
        max-width: 75%;
        /* instead of 100%, this will move the cells closer for a 'circular feel' */
    }
    .main-structure img { display: block; width: 80% } /* Modify to your needs */

    .main-structure .outCircle {
        /* flex for easy centering of '.inner' */
        display: flex; /* make visible */
    }
}

/**************************/
/* preferred global rules */
/**************************/
html,body            { width: 100%; max-width: 100% }

html                 { -webkit-box-sizing: border-box; box-sizing: border-box }
*, *:before, *:after { -webkit-box-sizing: inherit; box-sizing: inherit }

body                 { margin: 0 } /* remove default <body> spacing */
/*
    Above CSS defines ALL elements to use 'border-box' (most common practice nowadays)

    make sure to own the boxmodel knowledge!

    MDN 'The box model': https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model 
    w3schools 'CSS box-sizing Property': https://www.w3schools.com/cssref/css3_pr_box-sizing.asp
*/
/*

    All math reference: https://www.mathsisfun.com/equation_of_line.html

*/
/* responsive base font size using y = mx + b */
html   { font-size: calc(0.625vmin + 0.625rem) } /* (320,12)(1280,18) */

/* Simple banding attribute for use in 'Landing Page' layout */
[band] { display: flex; flex-flow: column wrap; align-content: center }

body[padded="1"],
body[padded="0"] [band*="padded"] {
/*
    responsive page padding
    and responsive band padding (same as responsive page padding, but at band level)

    Top/Bottom padding: p1(320,16) p2(1920, 72) => 0.035x + 4.8  => vary from 16 to  72px
    Left/Right padding: p3(320, 8) p4(1920,320) => 0.195x - 54.4 => vary from  8 to 320px

    'Band padding' is only active when 'page padding' is off (0)
*/
    padding: calc(3.5vh + 4.8px) calc(19.5vw - 54.4px);
}
/* for debugging (put in <body>) */
[outlines="1"] * { outline: 1px dotted }

<body outlines="0" padded="0">

<div band="padded.header">
    <h1>3x3 easy grid with two dummies</h1>
    <h3>easy, but straight columns</h3>
</div>

<div band="padded.info1">
    <div class="main-structure" patch="3x3">
        <div>
            <div class="headline">Meet the farmer</div>
            <ul>
                <li>Lorem ipsum dolor sit amet, exerci dolorem est ad.</li>
                <li>Lorem ipsum dolor sit amet, exerci dolorem est ad.</li>
            </ul>
        </div>
        <div>
            <div class="headline dummy"></div>
        </div>
        <div>
            <div class="headline">Provenance</div>
            <ul>
                <li>Lorem ipsum dolor sit amet, exerci dolorem est ad.</li>
                <li>Lorem ipsum dolor sit amet, exerci dolorem est ad.</li>
            </ul>
        </div>
        <div>
            <div class="headline">Certification</div>
            <ul>
                <li>Lorem ipsum dolor sit amet, exerci dolorem est ad.</li>
                <li>Lorem ipsum dolor sit amet, exerci dolorem est ad.</li>
            </ul>
        </div>
        <div>
            <img src="https://i.postimg.cc/zvBCdxp4/circles.png">
        </div>
        <!--div class="outCircle">
            <div class="inner">
                <div class="marker horiz"></div>
                <div class="marker vert"></div>
                <div class="marker angle-1"></div>
                <div class="marker angle-2"></div>
            </div>
        </div -->
        <div>
            <div class="headline">Life of the seed</div>
            <ul>
                <li>Lorem ipsum dolor sit amet, exerci dolorem est ad.</li>
                <li>Lorem ipsum dolor sit amet, exerci dolorem est ad.</li>
            </ul>
        </div>
        <div>
            <div class="headline">History of seed</div>
            <ul>
                <li>Lorem ipsum dolor sit amet, exerci dolorem est ad.</li>
                <li>Lorem ipsum dolor sit amet, exerci dolorem est ad.</li>
            </ul>
        </div>
        <div>
            <div class="headline dummy"></div>
        </div>
        <div>
            <div class="headline">IoT data this seed season</div>
            <ul>
                <li>Lorem ipsum dolor sit amet, exerci dolorem est ad.</li>
                <li>Lorem ipsum dolor sit amet, exerci dolorem est ad.</li>
            </ul>
        </div>
    </div>
</div>

<div band="padded.header">
    <h1>3x1 nested grid with 1x2, 1x3 and 1x2 child grids</h1>
    <h3>more complicated, but has rows with a 'circular feel'</h3>
</div>

<div band="padded.info2">
    <div class="main-structure" patch="3x1">
        <div patch="1x2">
            <div>
                <div class="headline">Meet the farmer</div>
                <ul>
                    <li>Lorem ipsum dolor sit amet, exerci dolorem est ad.</li>
                    <li>Lorem ipsum dolor sit amet, exerci dolorem est ad.</li>
                </ul>
            </div>
            <div>
                <div class="headline">Provenance</div>
                <ul>
                    <li>Lorem ipsum dolor sit amet, exerci dolorem est ad.</li>
                    <li>Lorem ipsum dolor sit amet, exerci dolorem est ad.</li>
                </ul>
            </div>
        </div>
        <div patch="1x3">
            <div>
                <div class="headline">Certification</div>
                <ul>
                    <li>Lorem ipsum dolor sit amet, exerci dolorem est ad.</li>
                    <li>Lorem ipsum dolor sit amet, exerci dolorem est ad.</li>
                </ul>
            </div>
            <div>
                <img src="https://i.postimg.cc/zvBCdxp4/circles.png">
            </div>
            <!--div class="outCircle">
                <div class="inner">
                    <div class="marker horiz"></div>
                    <div class="marker vert"></div>
                    <div class="marker angle-1"></div>
                    <div class="marker angle-2"></div>
                </div>
            </div -->
            <div>
                <div class="headline">Life of the seed</div>
                <ul>
                    <li>Lorem ipsum dolor sit amet, exerci dolorem est ad.</li>
                    <li>Lorem ipsum dolor sit amet, exerci dolorem est ad.</li>
                </ul>
            </div>

        </div>
        <div patch="1x2">
            <div>
                <div class="headline">History of seed</div>
                <ul>
                    <li>Lorem ipsum dolor sit amet, exerci dolorem est ad.</li>
                    <li>Lorem ipsum dolor sit amet, exerci dolorem est ad.</li>
                </ul>
            </div>
            <div>
                <div class="headline">IoT data this seed season</div>
                <ul>
                    <li>Lorem ipsum dolor sit amet, exerci dolorem est ad.</li>
                    <li>Lorem ipsum dolor sit amet, exerci dolorem est ad.</li>
                </ul>
            </div>
        </div>
    </div>
</div>

</body>

票数 0

Stack Overflow用户

发布于 2020-07-30 20:12:29

您可以将其包装在div中，并为<div>提供以下样式：

#circle {
    border: solid black 2px;
    border-radius: 50%;
    width: 10em; //Depends on the circles size..
    height: 10em;
}

票数 -1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/63172731

复制

相似问题

问圆圈周围带有文本的线条
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问圆圈周围带有文本的线条EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问圆圈周围带有文本的线条
EN