Question

我想用CSS舍入直线。但是我没有成功。我该怎么做？谢谢。

屏幕截图：
-设计：https://imgur.com/RCuJOVw
-我的CSS代码：https://imgur.com/ssMLQkl

.steps {
    margin-left: 80px;
    margin-top: 100px;
    display: inline-block;
    position: relative;

    &:before {
       content: '';
       position: absolute;
       top: -130px;
       right: 50px;
       width: 30px;
       height: 1px;
       background-color: #eff0f1;
    }
}

Answer 1

在边界上使用<?xml version="1.0" encoding="UTF-8"?> <MediaInfo xmlns="https://mediaarea.net/mediainfo" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="https://mediaarea.net/mediainfo https://mediaarea.net/mediainfo/mediainfo_2_0.xsd" version="2.0"> <creatingLibrary version="17.12" url="https://mediaarea.net/MediaInfo">MediaInfoLib</creatingLibrary> <media ref="/path/to/file.mkv"> <track type="General"> <UniqueID>174213452352936523294326454020021161878</UniqueID> <VideoCount>1</VideoCount> <AudioCount>2</AudioCount> <FileExtension>mkv</FileExtension> <Format>Matroska</Format> <Format_Version>2</Format_Version> <FileSize>7655754558</FileSize> <Duration>7087.808</Duration> <OverallBitRate>8641041</OverallBitRate> <FrameRate>23.976</FrameRate> <FrameCount>169937</FrameCount> <StreamSize>152359808</StreamSize> <IsStreamable>Yes</IsStreamable> <Encoded_Date>UTC 2010-09-04 22:54:43</Encoded_Date> <File_Modified_Date>UTC 2010-09-07 07:56:15</File_Modified_Date> <File_Modified_Date_Local>2010-09-07 07:56:15</File_Modified_Date_Local> <Encoded_Application>mkvmerge v3.3.0 ('Language') built on Mar 24 2010 14:59:24</Encoded_Application> <Encoded_Library>libebml v0.8.0 + libmatroska v0.9.0</Encoded_Library> </track> <track type="Video"> <StreamOrder>0</StreamOrder> <ID>1</ID> <UniqueID>1959315852</UniqueID> <Format>AVC</Format> <Format_Profile>Main</Format_Profile> <Format_Level>4.1</Format_Level> <Format_Settings_CABAC>No</Format_Settings_CABAC> <Format_Settings_RefFrames>4</Format_Settings_RefFrames> <CodecID>V_MPEG4/ISO/AVC</CodecID> <Duration>7087.796</Duration> <BitRate>7357000</BitRate> <Width>1280</Width> <Height>544</Height> <Sampled_Width>1280</Sampled_Width> <Sampled_Height>544</Sampled_Height> <PixelAspectRatio>1.000</PixelAspectRatio> <DisplayAspectRatio>2.353</DisplayAspectRatio> <FrameRate_Mode>CFR</FrameRate_Mode> <FrameRate>23.976</FrameRate> <FrameCount>169937</FrameCount> <ColorSpace>YUV</ColorSpace> <ChromaSubsampling>4:2:0</ChromaSubsampling> <BitDepth>8</BitDepth> <ScanType>Progressive</ScanType> <Delay>0.000</Delay> <StreamSize>6369345470</StreamSize> <Encoded_Library>x264 - core 93 r1542 5b86182</Encoded_Library> <Encoded_Library_Name>x264</Encoded_Library_Name> <Encoded_Library_Version>core 93 r1542 5b86182</Encoded_Library_Version> <Encoded_Library_Settings>cabac=0 / ref=1 / deblock=0:-1:-1 / analyse=0:0 / me=dia / subme=0 / psy=1 / psy_rd=0.00:0.00 / mixed_ref=0 / me_range=16 / chroma_me=1 / trellis=0 / 8x8dct=0 / cqm=0 / deadzone=21,11 / fast_pskip=1 / chroma_qp_offset=0 / threads=6 / sliced_threads=0 / nr=0 / decimate=1 / interlaced=0 / constrained_intra=0 / bframes=3 / b_pyramid=2 / b_adapt=2 / b_bias=0 / direct=1 / wpredb=1 / wpredp=0 / keyint=250 / keyint_min=25 / scenecut=0 / intra_refresh=0 / rc=2pass / mbtree=0 / bitrate=7357 / ratetol=1.0 / qcomp=0.60 / qpmin=10 / qpmax=51 / qpstep=4 / cplxblur=20.0 / qblur=0.5 / ip_ratio=1.40 / pb_ratio=1.30 / aq=0</Encoded_Library_Settings> <Default>Yes</Default> <Forced>No</Forced> </track> <track type="Audio" typeorder="1"> <StreamOrder>1</StreamOrder> <ID>2</ID> <UniqueID>2957281200</UniqueID> <Format>AC-3</Format> <Format_Settings_Endianness>Big</Format_Settings_Endianness> <CodecID>A_AC3</CodecID> <Duration>7087.808</Duration> <BitRate_Mode>CBR</BitRate_Mode> <BitRate>640000</BitRate> <Channels>6</Channels> <ChannelPositions>Front: L C R, Side: L R, LFE</ChannelPositions> <ChannelLayout>L C R LFE Ls Rs</ChannelLayout> <SamplesPerFrame>1536</SamplesPerFrame> <SamplingRate>48000</SamplingRate> <SamplingCount>340214784</SamplingCount> <FrameRate>31.250</FrameRate> <BitDepth>16</BitDepth> <Compression_Mode>Lossy</Compression_Mode> <Delay>0.000</Delay> <Delay_Source>Container</Delay_Source> <StreamSize>567024640</StreamSize> <StreamSize_Proportion>0.07407</StreamSize_Proportion> <Language>de</Language> <ServiceKind>CM</ServiceKind> <Default>Yes</Default> <Forced>No</Forced> <extra> <bsid>8</bsid> <dialnorm>-31</dialnorm> <dialnorm_String>-31 dB</dialnorm_String> <acmod>7</acmod> <lfeon>1</lfeon> <dialnorm_Average>-31</dialnorm_Average> <dialnorm_Average_String>-31 dB</dialnorm_Average_String> <dialnorm_Minimum>-31</dialnorm_Minimum> <dialnorm_Minimum_String>-31 dB</dialnorm_Minimum_String> <dialnorm_Maximum>-31</dialnorm_Maximum> <dialnorm_Maximum_String>-31 dB</dialnorm_Maximum_String> <dialnorm_Count>559</dialnorm_Count> </extra> </track> <track type="Audio" typeorder="2"> <StreamOrder>2</StreamOrder> <ID>3</ID> <UniqueID>1226757255</UniqueID> <Format>AC-3</Format> <Format_Settings_Endianness>Big</Format_Settings_Endianness> <CodecID>A_AC3</CodecID> <Duration>7087.808</Duration> <BitRate_Mode>CBR</BitRate_Mode> <BitRate>640000</BitRate> <Channels>6</Channels> <ChannelPositions>Front: L C R, Side: L R, LFE</ChannelPositions> <ChannelLayout>L C R LFE Ls Rs</ChannelLayout> <SamplesPerFrame>1536</SamplesPerFrame> <SamplingRate>48000</SamplingRate> <SamplingCount>340214784</SamplingCount> <FrameRate>31.250</FrameRate> <BitDepth>16</BitDepth> <Compression_Mode>Lossy</Compression_Mode> <Delay>0.000</Delay> <Delay_Source>Container</Delay_Source> <StreamSize>567024640</StreamSize> <StreamSize_Proportion>0.07407</StreamSize_Proportion> <Language>en</Language> <ServiceKind>CM</ServiceKind> <Default>No</Default> <Forced>No</Forced> <extra> <bsid>8</bsid> <dialnorm>-31</dialnorm> <dialnorm_String>-31 dB</dialnorm_String> <acmod>7</acmod> <lfeon>1</lfeon> <dialnorm_Average>-31</dialnorm_Average> <dialnorm_Average_String>-31 dB</dialnorm_Average_String> <dialnorm_Minimum>-31</dialnorm_Minimum> <dialnorm_Minimum_String>-31 dB</dialnorm_Minimum_String> <dialnorm_Maximum>-31</dialnorm_Maximum> <dialnorm_Maximum_String>-31 dB</dialnorm_Maximum_String> <dialnorm_Count>556</dialnorm_Count> </extra> </track> </media> </MediaInfo>。

border-top-right-radius

div {
  width: 50px;
  height: 100px;
  border-top: 3px solid grey;
  border-right: 3px solid grey;
  border-top-right-radius: 15px;
}

Answer 2

使用border-radius需用四个数字四舍五入一个元素的四个天使

border-radius: 5px 10px 15px 20px;

第一个是左上角，第二个是右上角，第三个右下角，第四个左下角使用％获得更多的直线曲线。

div{
  border-radius:5px 10px 15px 20%;
  width:300px;
  height:80px;
  border:3px solid #666;
}

<div></div>

如何使用CSS画一条直线？

2 个答案: