HTMLとCSSのアイデアは何ですか?あなたが唯一のCSSを必要と 円の上に縦線を作成するにはどうすればいいですか? (画像例あり)
-5
A
答えて
1
、フォームを作成する。これによりその
<div class="circle-border">
<div class="circle-image">
<img ....>
</div>
</div>
とCSSの
.circle-border{
overflow:hidden;
border-radius:50%;
position:relative;
width: 200px; //for example
height:200px; //for example
}
.circle-image{
position:absolute;
top:0;
left:0;
border-radius:50%;
border:8px rbba(255,255,255,.6);
}
.circle-border img{
width:100%;
object-fit:cover;
}
のようなマークアップ、唯一の最新デザインを調整する必要があります。他の多分最も簡単な方法は、恐らくあなたが必要とするもののために有益に素晴らしい効果をデザインに提供するiHoverのようなライブラリを使用することです。
縦線の場合は問題ありません。他のdivのイメージマークアップをenvolveし、divを絶対位置で設定し、 "top":50%とmargin-top:を設定するだけで、イメージとコンテンツを持っているdivを "相対"にする必要があります。 - 円のイメージのサイズのピクセルは、同じ値で左の位置を設定します。 HTMLは、そのようなことがあります。
<article>
<section class="container-image">
<div class="circle-border">
<div class="circle-image">
<img ....>
</div>
</div>
<section class="content">
<!-- your content here-->
</section>
1
ああ!私はこれを知っています。おそらく最高の解決策ではありませんが、私は.class:after
を使用しました(したがって、円の後に続く垂直線)。
次に普通のものを書きます:content:''
; background-color:#______
; height
; width
。
position:relative
、position:absolute
、left:50%
を使用できます。 また、CSSアニメーションを使用してそれを行うこともできますが、1または2ピクセルなので違いはありません。
希望します。
0
CSS Flexboxを使用できます。私のスニペットを見て:
.timeline-holder {
position: relative;
}
.timeline-holder:before {
content: '';
position: absolute;
top: 75px;
left: 50%;
transform: translateX(-50%);
width: 1px;
height: calc(100% - 75px);
background: #ccc;
z-index: -1;
}
.box {
display: flex;
align-items: center;
margin: 60px 0;
}
.box .text {
flex: 1;
padding: 0 20px;
}
.box img {
border-radius: 50%;
}
.box:nth-child(even) {
margin-right: calc(50% - 75px);
}
.box:nth-child(odd) {
flex-direction: row-reverse;
margin-left: calc(50% - 75px);
}
<div class="timeline-holder">
<div class="box">
<div class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero amet explicabo quis expedita fuga magnam consequatur perferendis aliquam ipsum odio magni illum aperiam, quod eaque, debitis consectetur, dolorem provident quidem.</div>
<img src="http://placehold.it/150x150" alt="" />
</div>
<div class="box">
<div class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero amet explicabo quis expedita fuga magnam consequatur perferendis aliquam ipsum odio magni illum aperiam, quod eaque, debitis consectetur, dolorem provident quidem.</div>
<img src="http://placehold.it/150x150" alt="" />
</div>
<div class="box">
<div class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero amet explicabo quis expedita fuga magnam consequatur perferendis aliquam ipsum odio magni illum aperiam, quod eaque, debitis consectetur, dolorem provident quidem.</div>
<img src="http://placehold.it/150x150" alt="" />
</div>
<div class="box">
<div class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero amet explicabo quis expedita fuga magnam consequatur perferendis aliquam ipsum odio magni illum aperiam, quod eaque, debitis consectetur, dolorem provident quidem.</div>
<img src="http://placehold.it/150x150" alt="" />
</div>
<div class="box">
<div class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero amet explicabo quis expedita fuga magnam consequatur perferendis aliquam ipsum odio magni illum aperiam, quod eaque, debitis consectetur, dolorem provident quidem.</div>
<img src="http://placehold.it/150x150" alt="" />
</div>
</div>
・ホープ、このことができます!
関連する問題
- 1. 画像の下にある背景の上に縦線があります。
- 2. 画像間に縦線を描くにはどうすればいいですか
- 3. iReportに縦線を描くにはどうすればいいですか?
- 4. css、javascriptで円の周りに円を作成するにはどうすればよいですか?
- 5. ggplot:プロットや縦線に複数の凡例を追加するにはどうすればよいですか?
- 6. マウスの上に縦線を表示するにはどうすればよいですか?
- 7. このX線画像から水平線を削除するにはどうすればいいですか?
- 8. 画像URLのリストから画像ギャラリーを作成するにはどうすればよいですか?
- 9. マウスオーバーで他の画像の上に画像を配置するにはどうすればよいですか?
- 10. 円のオブジェクトに画像を配置するにはどうすればいいですか?
- 11. 楕円の円周上の点を計算するにはどうすればよいですか?
- 12. 新しいMicrosoft Charting Controlのデータポイントに縦線を追加するにはどうすればいいですか?
- 13. HTML5キャンバス描画アプリケーションで円形の「ブラシチップ」を作成するにはどうすればよいですか?
- 14. Javascriptで画面の領域から画像を作成するにはどうすればよいですか?
- 15. フォームに線を描画するにはどうすればいいですか?
- 16. グリッド上で円を描くにはどうすればいいですか?
- 17. HTML CSSのみを使用して円を作成するにはどうすればよいですか?
- 18. 2つの円で形を作成するにはどうすればいいですか?
- 19. 市の境界線を含むopenlayersレイヤーを作成するにはどうすればよいですか?
- 20. 画像を縦に4列に並べるにはどうすればよいですか?
- 21. PictureBoxコントロールに色付きの枠線を作成するにはどうすればよいですか?
- 22. サーフェスプロットのスライスを作成して線を作成するにはどうすればよいですか? (Matlab)
- 23. この画像を境界線にするにはどうすればいいですか?
- 24. iOSチャートの折れ線グラフでセグメント線セクションを作成するにはどうすればよいですか?
- 25. ログスケールを使用するときに縦線を追加するにはどうすればよいですか?
- 26. テキストの左側に縦線を追加するにはどうすればいいですか?
- 27. すべてのグリッド線で線グラフの値を作るにはどうすればいいですか
- 28. MATLABのプロットの軸上でテキストを縦に反転させるにはどうすればよいですか?
- 29. 10億個のpng画像のユニタリーサムネイルを作成するにはどうすればいいですか?
- 30. 画面上の画像にファイルフィールドに値を追加するにはどうすればよいですか?
まだ試しましたか? –
まだありませんが、私はpositionとz-indexを使って3つのdiv(テキストの場合は1、imgの場合は1、空の場合は1)で作成しようとしています。 –
あなたのマークアップとアプローチがあると、何かを試してみてください。 – DaniP